如何將具有相同類的所有元素拖到元素？

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中使用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”列表中，以便您可以適當地設置其樣式，當然，您需要根據自己的需要對其進行修改。