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

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辅助”列表中，这样就可以适当地设定样式，当然，你要修改它自己的需要。