如何将具有相同类的所有元素拖动到元素？

Question

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

点击这些元素时，我需要一次拖动所有列表项并使用“active”类，并允许它们放在任何drop容器元素上：

如果我点击并按住上面屏幕截图中的任何绿色项目（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选项，当它们拖动时你克隆三个活动元素作为帮助。例如：

$('.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”列表中，以便您可以对其进行适当的样式设置，当然您也可以根据自己的需要对其进行修改。