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.

3 thoughts on “Creating a drag’n’drop basket with jQueryUI

  1. nice samble… but remove link doesn’t remove!!!
    how can be solved ? i did not find anything similar …

Leave a Reply

Your email address will not be published. Required fields are marked *