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

Posted 2023-05-08

【中文标题】在 JQuery UI 上做一个可拖动的 connectToSortable 多个可排序

【英文标题】：On JQuery UI do one draggable connectToSortable multiple sortables

【发布时间】：2018-03-17 09:15:30

【问题描述】：

在 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
 );

您有什么解决方案或建议可以按照我的要求去做吗？非常感谢

【参考方案1】：

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

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

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

Online demo (fiddle)

【讨论】：

它适用于 Jquery 2.0 和 Jquery UI 1.10.3，但不适用于我当前使用 Jquery 1.7.2 和 JQuery UI 1.8.9 的项目。无论如何，谢谢你的帮助。