jQuery的UI做一个可拖动的connectToSortable多个sortables

Question

jQuery的UI，我有一个可拖动的，它有如下的选项connectToSortable：

$("#social li").draggable({ 
     connectToSortable: '#form_builder_sortable', 
     helper:'clone', 
     revert:true 
}); 

'#form_builder_sortable' 是排序如下：

$("#form_builder_sortable").sortable(); 

我想1个拖动列表连接到多个排序列表，如：

$("#social li").draggable(
{ 
    connectToSortable: '#form_builder_sortable, #form_builder_sortable_sample', 
     helper:'clone', 
     revert:true 
}); 

有无你有任何解决方案或建议做我的要求？非常感谢

Answer 1

connectToSortable选项接受选择器，选择器可以指定任意数量的列表。

请看下面的例子：

可拖动列表

<ul> 
    <li class="draggable ui-state-highlight">Drag me down</li> 
</ul> 

Mulitiple列表

<ul id="form_builder_sortable" class="sortable"> 
    <li class="ui-state-default draggable">Item 1</li> 
    <li class="ui-state-default draggable">Item 2</li> 
    <li class="ui-state-default draggable">Item 3</li> 
</ul> 

<ul id="form_builder_sortable_sample" class="sortable"> 
    <li class="ui-state-default draggable">Item 1</li> 
    <li class="ui-state-default draggable">Item 2</li> 
    <li class="ui-state-default draggable">Item 3</li> 
    <li class="ui-state-default draggable">Item 4</li> 
</ul> 

我给他们的同班class="sortable"因为我想拖动拖动列表两者他们。最后，我可以使用下面的代码拖动它：

$(".sortable").sortable(); 

$(".draggable").draggable({ 
    connectToSortable: '.sortable', // Selector selects lists that have sortable class 
    helper: 'clone' 
});