javascript - 如何将具有相同类的所有元素拖到元素中？

Question

jsFiddle:http://jsfiddle.net/XUygj/2/

我需要在单击这些元素中的任何元素时一次拖动所有列表项并允许将它们放在任何拖放容器元素上:

如果我在上面的屏幕截图中单击并按住任何绿色项目 (2,4,5)，我应该能够将一次全部拖到任何黄色容器中并触发一个 js 函数来适本地处理所选项目。

我怎样才能做到这一点？

我还需要保留一次拖放单个未选择的列表项(没有 active 类)的能力。

我一次一个jsFiddle那行得通。我就是想不通多个拖放操作。

HTML: ( http://jsfiddle.net/XUygj/2/ )

<ul class="drop-containers">
    <li class="drop1">Drop 1</li>
    <li class="drop2">Drop 2</li>
    <li class="drop3">Drop 3</li>
</ul>

<ul class="items">
    <li class="item1" data-object="item1">Item 1</li>
    <li class="item2 active" data-object="item2">Item 2</li>
    <li class="item3" data-object="item3">Item 3</li>
    <li class="item4 active" data-object="item4">Item 4</li>
    <li class="item5 active" data-object="item5">Item 5</li>
    <li class="item6" data-object="item6">Item 6</li>
</ul>

JS:

$(document).ready(function() {
    $('.items > li').draggable({ revert: "invalid" });

    $('.drop-containers li').droppable({
        drop: function(event, ui) {
            var $this = $(this); // reuse JQuery object.
            var droppedObject = ui.draggable.data('object'); // get object type
            ui.draggable.remove();
            $this.append(', ' + droppedObject);
        }
    });
});

CSS

* {
    margin:0;
    padding:0;
}
.drop-containers {
    width:150px;
    display:inline-block;
}
.drop-containers li {
    width:100px;
    height:100px;
    border:1px solid;
    display:inline-block;
    margin:10px;
    background:#ffc;
}

.items {
    width:120px;
    display:inline-block;
    list-style-type:none;
}
.items li {
    width:100px;
    height:20px;
    border:1px solid;
    margin:10px;
    background:#fff;
}
.items li.active {
    background:#dfc;
}

Answer 1

您需要在 jQuery draggable 中使用 helper 选项，当它们拖动时您将三个事件元素克隆为 helper。例如:

$('.items > li').draggable({
    revert: 'invalid',
    helper: function(event) {
        var helperList = $('<ul class="draggable-helper" />');
        if ($(this).is('.active')){
            helperList.append($(this).siblings('.active').andSelf().clone());
        } else {
            helperList.append($(this).clone());
        }
        return helperList;
    }
});

该辅助函数会将它们附加到“.draggable-helper”列表中，这样您就可以适本地设置它的样式，当然您会希望根据自己的需要对其进行修改。