在JQuery UI上做一个可拖动的connectToSortable多个可排序项 [英] On JQuery UI do one draggable connectToSortable multiple sortables

问题描述

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

In JQuery UI, I have a draggable, It have an option connectToSortable as below:

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

'＃form_builder_sortable'是可排序的，如下所示：

'#form_builder_sortable' is a sortable as below:

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

我希望1个可拖动列表连接到多个可排序列表，例如：

I want 1 draggable list connect to multiple sortable list, such as:

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

您有任何解决方案或建议可以按我的要求进行吗？非常感谢

Have you got any solutions or suggestion to do as my requirement? Thanks a lot

推荐答案

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

The connectToSortable option accepts a selector and a selector can specify any number of lists.

请参阅以下示例：

可拖动列表

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

I gave them same class class="sortable" because I want drag draggable list to both of them. Finally I can use code below for drag it:

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

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

在线演示（小提琴）

这篇关于在JQuery UI上做一个可拖动的connectToSortable多个可排序项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！