Data driven web page with drag and drop interface for layout designing

I require a web page which will allow users to drag and drop items of garden furniture from a menu into a pre-defined area on the screen (the lawn). Users will select from a list of garden furniture (sheds, fountains, trees etc.) and drag them onto the virtual garden (a green rectangle). Each object on the menu will be of different size. Each item must have a rectangular border around inside which other items cannot co-exist. Item boundaries are defined as a rectangle of Object Height + Xmm x Object Width + Xmm. When a user drags an icon from the menu the icon and the boundary must be displayed. Items must be able to be rotated at 90 degree intervals. The furniture icons, when placed on the garden must be to scale (i.e. a shed with a width of 1m must display as 10% of the width of a 10m garden). Items must come from a database (perhaps MDB or XML or Embedded javascript array) and must have properties such as the following: * Item ID * Item Category (shed, tree, fountain etc.) * Icon Image URL * Icon Height * Icon Width * Price * Title * Description * Dependencies (you can only have this item if you also have this other item) I have attached a very simple screenshot of what I imagine the interface to look like. **The use of Flash/Silverlight or any other technology which requires a plug-in or is not 100% compatible with iPhone/iPad/Android web browsers is prohibited.** I'd prefer the server side stuff (if required) to be written in Microsoft .NET technologies, but this is not essential. When the user clicks proceed, they should be taken to a second page which shows the contents of the basket (these should also be put into hidden form tags so I can submit to a shopping basket/payment system) and a screenshot of the configuration the user made should be displayed (and saved server side so I can see what they designed).