jQuery UI 多选拖动

Question

我需要以下功能

1. 通过鼠标拖动和类似于 jQuery UI 可选项的 Cntrl 键从列表中选择项目。
一次
2. 应拖动多个项目。

我需要类似于操作系统拖放功能的应用程序。

我的问题是，如果我想选择鼠标指针项目正在拖动的多个项目，如何解决。

我尝试使用该代码，但它在选择多个项目时存在一些缺陷。

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

这是多选拖动的演示

演示

只需使用可选的插件即可选择多个项目

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

Answer 2

使用可选网格示例代码并添加可拖动 + 可排序功能，如以下示例所示：http://jqueryui.com/demos/draggable/#sortable