如何在 jQuery UI 中将多个可排序列表相互连接？

Posted 2023-02-24

【中文标题】如何在 jQuery UI 中将多个可排序列表相互连接？

【英文标题】：How do I connect multiple sortable lists to each other in jQuery UI?

【发布时间】：2010-09-23 08:56:44

【问题描述】：

我是 jQuery 新手，在使用 jQuery UI 的 sortable 时我完全不适应。

我正在尝试整理一个页面以方便对项目进行分组和排序。

我的页面有一个组列表，每个组都包含一个项目列表。我希望允许用户能够执行以下操作：

重新排序组 对组内的项目重新排序 在组之间移动项目

前两个要求没问题。我能够很好地对它们进行分类。问题来自第三个要求。我只是无法将这些列表相互连接。一些代码可能会有所帮助。这是标记。

<ul id="groupsList" class="groupsList">  
  <li id="group1" class="group">Group 1  
    <ul id="groupItems1" class="itemsList">  
      <li id="item1-1" class="item">Item 1.1</li>  
      <li id="item1-2" class="item">Item 1.2</li>  
    </ul>  
  </li>
  <li id="group2" class="group">Group 2  
    <ul id="groupItems2" class="itemsList">  
      <li id="item2-1" class="item">Item 2.1</li>  
      <li id="item2-2" class="item">Item 2.2</li>  
    </ul>  
  </li>
  <li id="group3" class="group">Group 3  
    <ul id="groupItems3" class="itemsList">  
      <li id="item3-1" class="item">Item 3.1</li>  
      <li id="item3-2" class="item">Item 3.2</li>  
    </ul>  
  </li>
</ul>  

我可以通过将$('#groupsList').sortable(); 和$('.itemsList').sortable(); 放入document ready function 来对列表进行排序。我尝试使用sortable 的connectWith 选项使其工作，但我失败了。我想做的是将每个groupItemsX 列表连接到每个groupItemsX 列表但它本身。我该怎么做？

---

我在想我需要特别不将列表连接到自身，否则会有某种循环引用。当然，我没有使用 Excel，但似乎这可能会导致某种永无止境的递归，从而导致堆栈溢出或其他问题。唔。对不起双关语。忍不住自己。

无论如何，我试图做这样的事情，但它不起作用：

$('.groupsList').sortable(); // worked great  
$('.groupsList').each( function ()   
    $(this).sortable(   
        connectWith: ['.groupsList':not('#'+ $(this).attr('id') )];  
    );  
);  

我确定我已经完全破坏了那里的语法，我想这就是我必须首先提出这个问题的原因。将当前项目从列表中过滤掉是否有必要或有帮助？

Adam 和 JimmyP 提供的两个答案都在 IE 中工作（尽管它们在 FireFox 中的行为非常奇怪，当您尝试重新排序时会覆盖列表项）。我会接受你的一个答案并对另一个投票，但如果你对过滤有任何想法/建议，我想听听。

【参考方案1】：

您能否包含用于connectWith 的语法？您是否将其他组的列表放在括号内（即使它是选择器）？那就是：

...sortable(connectWith:['.group'], ... 

【讨论】：

我已经把它放在括号里，但我想做更多。见下文。或者我的后续回答取决于你的看法。这里：***.com/questions/307411/…

【参考方案2】：

这应该可行：

$('#groupsList').sortable();
$('.itemsList').sortable(
    connectWith: $('.itemsList')
);

【讨论】：

这似乎可行，但似乎没有遵循文档建议的括号语法。也许那些括号不是必需的？

【参考方案3】：

 $(function() 
            $( "#groupItems1, #groupItems2, #groupItems3" ).sortable(
                connectWith: ".itemsList"
            ).disableSelection();
        );

这对你来说一切顺利！在这里为我做同样的事情。无需更改您的 html。

【讨论】：

我看到很晚（发布后）你已经得到了解决方案。美好的一天！