jQuery ui multi select drag -
i need below functionalities
- select items list mouse dragging , cntrl key similar jquery ui selectables.
- 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
just use selectable plugin select multiple items
$(".itemlist").selectable({filter:"li"});
Comments
Post a Comment