jQuery ui multi select drag -


i need below functionalities

  1. select items list mouse dragging , cntrl key similar jquery ui selectables.
  2. multiple items should draggable @ time.

i need application similar operating system drag , drop functionality.

my problem if select multiple items mouse pointer item dragging, how resolve it.

i tried use code has defects on selecting multiple items.

$(document).ready(function(){      var selectedclass = 'ui-state-highlight',         clickdelay = 600,     // click time (milliseconds)         lastclick, diffclick; // timestamps      $("#draggable li")         // script deferentiate click mousedown drag event         .bind('mousedown mouseup', function(e){             if (e.type=="mousedown") {                 lastclick = e.timestamp; // mousedown time             } else {                 diffclick = e.timestamp - lastclick;                 if ( diffclick < clickdelay ) {                     // add selected class group draggable objects                     $(this).toggleclass(selectedclass);                 }             }         })         .draggable({             revertduration: 10, // grouped items animate separately, leave number low             containment: '.demo',             start: function(e, ui) {                 ui.helper.addclass(selectedclass);             },             stop: function(e, ui) {                 // reset group positions                 $('.' + selectedclass).css({ top:0, left:0 });             },             drag: function(e, ui) {                 // set selected group position main dragged object                 // works because position relative starting position                 $('.' + selectedclass).css({                     top : ui.position.top,                     left: ui.position.left                 });             }         });      $("#droppable, #draggable")         .sortable()         .droppable({             drop: function(e, ui) {                 $('.' + selectedclass)                  .appendto($(this))                  .add(ui.draggable) // ui.draggable appended script, add after                  .removeclass(selectedclass)                  .css({ top:0, left:0 });             }         });  }); 

here demo of multiselect drag

demo

just use selectable plugin select multiple items

$(".itemlist").selectable({filter:"li"}); 

Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c# - Copy ObservableCollection to another ObservableCollection -

All overlapping substrings matching a java regex -