Wednesday, November 2, 2011

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 here!
     Download the Zip file 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).

13 comments:

  1. hi raju.. the example is really nice.. i tried to more dynamic like, now the Json is passed to the function for creating the object. is it possible to pass the source and destination object in the pageload function, its helps to re-create "n" numbers of drag and drop in single page. Please feel free to contact me balajimadavan@gmail.com

    ReplyDelete
    Replies
    1. Hi Balaji..thanks for your comments, sent an email to you.

      Delete
  2. im sorry - ive been coding for a few years lol, but havent gotten completely familiar with jquery - how would i post that as post data? i found this: seems like it converts all post data of form id=myform into a http post - ?? so i just wrap form tags around the divs or what?


    $(document).ready(function(){
    $("#myform").submit( function () {
    $.post(
    'process.php',
    $(this).serialize(),
    function(data){
    $("#results").html(data)
    }
    );
    return false;
    });
    });

    ReplyDelete
  3. Hi, Nice description and demonstration about Drag and Drop List Items in web technology.Thanks, its extremely helped me.....

    -Aparna
    Theosoft

    ReplyDelete
  4. I'm working with JQuery 1.10.2 and noticed DDScript.js needs a bit of updating.

    "Uncaught TypeError: Object [object Object] has no method 'die'"
    Line 14:
    Change: ui.helper.die(); to ui.helper.off();

    "Uncaught TypeError: Object [object Object] has no method 'live'"
    Line 61:
    Change: $("#list1>div, #list2>div").live("click",function(e){ to $("#list1>div, #list2>div").on("click",function(e){

    Other than that this is exactly what I was looking for. Thanks!

    ReplyDelete
    Replies
    1. Hi Tyler,
      JQuery has removed some of the older functions from its newer libs like 1.9+. You can try using older version of jquery or use jquery-migrate plugin along with your 1.10v : https://github.com/jquery/jquery-migrate/#readme
      or try html5 version: http://farhadi.ir/posts/the-story-behind-html5-sortable/

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Hi the Concept is good but it is possible to select multiple items with out using control key and shit key with out using these commands is it possible to drag multiple items from one container to another.

    ReplyDelete
    Replies
    1. Yes thats possible selecting multiple items without ctrl key by just updating the code, provided you enabled deselection strategy (using right click instead of ctrl key or by any other alternative).

      Delete
  7. hi raju.. the example is really nice.. this is very use full me. thank's alot

    ReplyDelete
  8. Hi Raju,

    It's working fine but when I page refresh Destination array blank so How to solved it?

    ReplyDelete
    Replies
    1. Hi Ankit,

      Try storing the destination state either in localStorage or Cookie during drop event and try restoring state on page refresh.

      Delete
  9. Hi Raju,

    I am not getting json array key and value on finalFunc when I apply the each loop ?

    How to solved that

    ReplyDelete