jQuery ui đa chọn kéo

Question

tôi cần các chức năng dưới đây

1. chọn các mục từ danh sách bằng cách kéo chuột và Cntrl chìa khóa tương tự như selectables jquery ui.
2. Nhiều mục có thể kéo được cùng một lúc.

Tôi cần ứng dụng tương tự như chức năng kéo và thả của hệ điều hành.

vấn đề của tôi là nếu tôi muốn chọn nhiều mục mà mục con trỏ chuột đang kéo, cách giải quyết nó.

Tôi đã cố gắng sử dụng mã nhưng có một số lỗi trong việc chọn nhiều mục.

$(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

Đây là một bản demo của kéo multiselect

Demo

Chỉ cần sử dụng plugin có thể lựa chọn để chọn nhiều mục

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

Answer 2

Sử dụng mã ví dụ Selectable Lưới và thêm chức năng Draggable + Sortable như trong ví dụ này: http://jqueryui.com/demos/draggable/#sortable