Creating a drag’n'drop basket with jQueryUI

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.

• Live example
• View source code