mFabrik - web and mobile development » cdn http://blog.mfabrik.com Freedom delivered. Thu, 09 Sep 2010 07:16:00 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Creating a drag’n'drop basket with jQueryUI http://blog.mfabrik.com/2010/01/05/creating-a-dragndrop-basket-with-jqueryui/ http://blog.mfabrik.com/2010/01/05/creating-a-dragndrop-basket-with-jqueryui/#comments Tue, 05 Jan 2010 12:53:07 +0000 Mikko Ohtamaa http://blog.twinapex.fi/?p=401 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

basket

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.

]]> http://blog.mfabrik.com/2010/01/05/creating-a-dragndrop-basket-with-jqueryui/feed/ 2