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

knowwebapp.com美丽主题

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

根据我的要求，您有任何解决方案或建议吗？非常感谢

阿里·索塔尼（Ali Soltani）

该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'
});

在线演示（小提琴）

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。