javascript - 同じクラスのすべての要素を要素にドラッグするにはどうすればよいですか?

Question

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

これらの要素のいずれかをクリックすると、クラス「アクティブ」ですべてのリスト項目を一度にドラッグし、ドロップ コンテナー要素のいずれかにドロップできるようにする必要があります。

上のスクリーンショットの緑色のアイテム (2、4、5) のいずれかをクリックして押したままにすると、それらすべてを一度に黄色のコンテナーのいずれかにドラッグし、選択したアイテムを処理する js 関数をトリガーできるはずです。適切に。

どうすればこれを達成できますか?

また、選択されていない単一のリスト項目 (activeクラスなし) を一度に 1 つずつドラッグ アンド ドロップする機能も保持する必要があります。

私は一度に1つずつ動作している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;
}