Please read the full requirements in the "Detailed Requirements" section, below.
The area in the middle of the screen that contains multiple Items.
The Canvas must support multiple resolutions. We'll start by fixing its size as 800x600 pixels, but this must be a setting that can easily be changed, and changing this setting must be supported.
The user should be able to arrange Items by dragging and dropping in the Canvas area. If the Item is a Table element, any Chair elements attached must move smoothly with the table when dragged.
When an Item is dragged out of the Canas by the user, an "Are you sure you want to delete this Table/Chair" confirmation box should be displayed (with the text changed to say Table or Chair, depending on the Item to be deleted) and if the user clicks the confirmation, the Item should be deleted from the display. There must be a setting to turn on and off this confirmation, for both Table and Chair elements.
Represents a Table or Chair element.
Items can be dragged on to the Canvas from a vertical menu on the left-hand side of the Canvas.
Each Item will be represented in this menu with a relevant graphic, supplied by the coder, and a description underneath.
The descriptions will be:
Add Circular Table
Add Rectangular Table
A circular or rectangular graphic, supplied by the coder, that represents a table, and which Chair elements are attached to.
Chair elements may be attached by dragging the "Add Chair" graphic from the left-hand menu onto the table.
Chair elements may be removed by dragging them off the canvas.
Chair elements may be rearranged by dragging them around the table.
Chair elements must be "sticky" and initially cling to the Table element's edge until the user's intentions (i.e. remove or rearrange) are obvious.
Both circular and rectangular Table elements must grow or shrink as Chair elements are attached or removed.
A circle graphic, supplied by the coder, that represents a chair at a table.
Each Chair element will have a user-defined Name associated with it, which will be displayed in the middle of the Chair graphic using a sans-serif font.
Until set by the user, a Chair element's name will be "Click To Set Name"
The user can change a Chair element's name by clicking on its existing name. When this happens, a popup box (note: use the jQuery plugin of your choice; anything but a call to prompt()) will be displayed, with a textbox pre-filled with the Chair element's current name, and buttons to "Set Name" or "Cancel."
A Chair can only be attached to a Table element; it must not be possible for the user to drag a new Chair element onto the Canvas unless they attach it to a Table element.
Any images used must be originals, or free to use for commercial use.
Any GPL software (e.g. jQuery plugins, jQuery UI) is fine - just let me know in advance what you want to use.
The graphic elements can be simple, but must look good. I want you to show me examples of what you plan to use before coding begins. Any clever jQuery plugins that help are welcome.
This should be an easy task for a jQuery wizard, and if you can show me even a basic proof-of-concept, that will go a long way in making me choose your bid.
If you have any ideas for improvements, or questions about anything that needs to be clarified, get in touch :-)
9 freelancers are bidding on average $338 for this job
Hi, We at on2itonline would love to work with you on this. We have read carefully the project description and fully understand the project requirement. Let's discuss further issues of the project through PM