• About

    Twinapex Blog is the voice of mobile and Internet experts. We tell tales about our exciting life in the world where communication methods convergence and you can access whatever information you wish, wherever, on whichever device you want.

    If you find us interesting and talented and you are looking for developers, please contact us and we might just be able to help you.

    Creative Commons License
    This work is licensed under a Creative Commons Attribution 3.0 Unported License.

Creating a drag’n'drop basket with jQueryUI

Posted on January 5, 2010  by Mikko Ohtamaa
Filed Under jquery, jqueryui, technology
Tags: , , , ,

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.