Drag and Drop List Items (with multi selection)

    Here you will find information about selecting items by drag-n-drop on webpage and how i created drag-n-droppable items in listBoxes using JQuery-UI Sortable.

    On JQuery-UI Sortable Demo page, List items been represented by <li>, I tried with <li> and <td> as items, both of them not satisfied my requirement. Instead of using <li> as items, I used <div> tags. One of the required feature is, multi-select drag drop using ctrl + mouse drag.

     The sample demo page contains 2 Listboxes (source, destination). Source box is filled with items from JSON data(static or coming from Asp.Net). On button click, the selected/dropped items in destination box
are stored in a hidden-field as JSON string and you can retreive them at serverside. (or in JS version, just filling in a textarea).

Below Screenshots shows the Drag-n-Drop in action

Step 1

Step 2

Step 3

The downloadable Zip file contains both javascript and Asp.Net versions, along with documentation, JS and  CSS files. JQuery files are not included.

Requirements: 
      JQuery, JQuery-UI (& optionally Asp.Net, C#, DotNet 3.5+ at serverside).

Tested in IE8 & FF7.

Downloads:
     You can check the demo and downloads here!

References:

• http://jqueryui.com/demos/sortable/#connect-lists
• http://blogs.msdn.com/b/rakkimk/archive/2009/01/30/asp-net-json-serialization-and-deserialization.aspx

Edit: Code updated, to de-select items from multi-selection. (on 12 Nov 2011).