I have created an example how to create a “basked” with jQuery and jQueryUI with the following features
- The user can be pick items from the predefined set
- Items are dragged and dropped to the basket
- The basket value reflects a hidden input
This kind of user interface pattern is suitable for
- Shopping carts
- Travel planners
The example in fact bears the name “travel planner” but it is not tied to travel anyhow.
Note: this is just a screenshot – please see live example
The example code uses
- google.code() content delivery network to load jQuery and jQueryUI
- jQueryUI draggable and droppable features
- Well planned visual cues for the drag and drop operations: cursor changes, CSS hover classes
- <form> which <input> value is updated according to the basket content – all selected item ids form a comma separated list
The example code is well-documented with links to the further documentation.