jQuery UI sortable drag multiple to target

Thursday, 3 December 2009


This tutorial looks at building a jQuery sortable UI widget that allows for sorting and for dragging multiple items on to a droppable target.


This is my first attempt (and possibly last) at building this so I haven't had a chance to check this off with all options available, I only built it for a single purpose.

The demo can be viewed here

And you can download the code from here

A brief rundown on how it works: control-click to select/deselect items. When the first item is dragged the other items are cloned and the original element hidden. If the main item being dragged hits the droppable target then the element and all its siblings are removed:

$("document").ready(function() {
  $("#sortable1").multisortable({});
  $("#sortable1").disableSelection();
  $("#target").droppable({
   accept: "#sortable1 li",
   drop: function(event, ui) { 
    var elements = $(ui.draggable).siblings(".ui-multisort-grouped").andSelf();
    
    $(elements).remove();
   }
  });
});

The element being dragged and its siblings are stored in the elements variable so you can essentially do what you like with them (read attributes etc.) at this point.

Hope this helps some people.

Enjoy!
blog comments powered by Disqus