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

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

你要使用helper選項jQuery的可拖動，當他們拖您將三個活動元素作爲幫助器進行克隆。例如：

$('.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輔助」列表中，這樣就可以適當地設定樣式，當然，你要修改它自己的需要。