Question : Propose solution based on HTML CSS and JavaScript for graphics related problem

I want to develop an application in which image objects are dragged and placed into
another region or near other fixed objects.

For example given the fixed object is furniture table which is itself is simply a graphic image with background transparency defined. Now I want to drag a chair which is also an image with transparency such as PNG image. Depending where I drag the chair near table, certain portions of chair are automatically hidden by the table just like in a real word it would.

The requirements are:
must not use Flash
should not use WebGL , SVG etc or other technologies still not widely supported by all
platforms.
Should not require the user to download a browser plugin.

The solution should be based on JavaScript (preferably jQuery based), HTML, CSS.
I would be OK if IE 7 or older IE are not supported by your proposed solution.

Please propose the solution ( such as what JavaScript library to use) that in your actual experience is a working solution not just what you think it should work. Or at least provide guidance that would lead me to a solution subject to above limitations. Again it should be something that is truly helpful based on your actual experience.

Answer : Propose solution based on HTML CSS and JavaScript for graphics related problem

So what it sounds like you are really wanting is this http://v3.planningwiz.com/ but not in flash.  (by the way, click on the left examples of plans to see it in action)


>I want to develop an application in which image objects are dragged and placed into
another region or near other fixed objects.

This will be done via the jquery draggle function

>Now I want to drag a chair which is also an image with transparency such as PNG image. Depending where I drag the chair near table, certain portions of chair are automatically hidden by the table just like in a real word it would.

This will be done by changing the zindex of your image with on on click so once you click in image, it will be on top of all other images.  http://stackoverflow.com/questions/890191/can-you-change-z-index-with-js-in-ie8

You can also assign zindex values in your code so that a chair for instance will always be under a table.  There is a great easy jquery plugin for this http://plugins.jquery.com/project/drag  The examples are http://threedubmedia.com/code/event/drag/demo/ and if you find the one for zindex that will help give you a hint of what to do.

The key will be assigning the zindex values to each draggle item to determine what goes on top, middle or bottom.  You can choose to bring it on top with zindex when clicked but go back to its default state after it is released such as the case with a table and chair where the chair should be under the table.

I believe this meets  your needs based on what you have provided so far.  I think from here is to start building your page and if you require code examples of where you are stuck, post your code so we can see what you working with along with some sample images.

It sounds like this will be a nice project to complete.