Question

我需要以下功能

通过鼠标拖动和cntrl键从列表中选择项目，类似于jquery ui selectables。
一次应该可以拖动多个项目。

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

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

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

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

这是多选拖动的演示

Demo

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

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

Answer 2

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

jQuery ui多选拖动

2 个答案: