JQuery ui multi select drag

Question

I need the following functions

• select items from the list by dragging with the mouse and the cntrl keys, similar to jquery ui selectables.
• Several items should be dragged at a time.

I need an application similar to operating system drag and drop functions.

My problem is that if I want to select multiple items moved by a mouse pointer item, how to solve it.

I tried to use the code, but it has some disadvantages when selecting multiple elements.

$(document).ready(function(){ var selectedClass = 'ui-state-highlight', clickDelay = 600, // click time (milliseconds) lastClick, diffClick; // timestamps $("#draggable li") // Script to deferentiate a click from a mousedown for drag event .bind('mousedown mouseup', function(e){ if (e.type=="mousedown") { lastClick = e.timeStamp; // get mousedown time } else { diffClick = e.timeStamp - lastClick; if ( diffClick < clickDelay ) { // add selected class to group draggable objects $(this).toggleClass(selectedClass); } } }) .draggable({ revertDuration: 10, // grouped items animate separately, so leave this 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 to main dragged object // this works because the position is relative to the 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 is appended by the script, so add it after .removeClass(selectedClass) .css({ top:0, left:0 }); } }); }); 

Answer 1

Below is a demonstration of multipurpose drag and drop

Demo

Just select a plugin to select multiple items.

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

Answer 2

Use the sample grid selection code and add the Draggable + Sortable function, as shown in this example: http://jqueryui.com/demos/draggable/#sortable