Creating a drag’n'drop basket with jQueryUI
Posted on January 5, 2010 by Mikko Ohtamaa
Filed Under jquery, jqueryui, technology
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.
Other posts by Mikko Ohtamaa
can you make a basic shopping site and cart with this code ? i saw a web page like this http://www.panic.com and another one http://www.dragdropcart.com
The code is only for the cart. The shopping site needs lots of more: order registry, product registry and so on.
There are lots of basic shopping sites ready:
http://www.plonegetpaid.com/
http://www.satchmoproject.com/