在 JQuery UI 上执行一个可拖动的 connectToSortable 多个可排序

On JQuery UI do one draggable connectToSortable multiple sortables

在 JQuery UI 中,我有一个 draggable,它有一个选项 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
 });

按照我的要求,您有什么解决方案或建议吗?非常感谢

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

请看下面的例子:

可拖动列表

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

多个列表

<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 class="sortable" 因为我想将可拖动列表拖到他们两个。最后我可以使用下面的代码来拖动它:

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

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

Online demo (fiddle)