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

Question

我刚开始学习jQuery，现在对使用jQuery UI的sortable感到十分困惑。

我想要创建一个网页来方便地对项目进行分组和排序。网页上有一些分组，每个分组内又包含一些项目。我希望用户能够执行以下操作：

1. 重新排列分组
2. 重新排列分组内的项目
3. 在不同分组之间移动项目

前两个需求没有问题，我可以轻松地将它们排序。但是第三个需求出现了问题，我无法将这些列表连接起来。下面是一些代码，可能会有所帮助。这是标记：

<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>  

通过在document ready function中加入$('#groupsList').sortable({});和$('.itemsList').sortable({});，我能够对列表进行排序。我尝试使用sortable的connectWith选项来使其工作，但失败得很惨。我想做的是将每个groupItemsX列表连接到除自身以外的所有groupItemsX列表。我该怎么做？

---

我想我需要明确不将一个列表与自身连接，否则可能会出现某种循环引用。虽然我没有使用Excel，但似乎这样做可能会导致一些无限递归的问题，从而引起栈溢出或其他问题。抱歉，我喜欢开玩笑。

无论如何，我正在尝试像这样做，但它并没有起作用：

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

我相信我完全搞砸了语法，这也是我不得不首先提出问题的原因。从性能角度来看，过滤掉当前项目是否必要或者有帮助呢？

Adam和JimmyP提供的两个答案在IE上都工作正常（虽然在FireFox中行为非常奇怪，在尝试重新排序时覆盖列表项）。我将接受你们中的一个答案并投票给另一个，但如果你对过滤有想法/建议，我很乐意听取。

- Abs

Answer 1

你能包含你使用的connectWith语法吗？你是否将其他分组的列表放在括号内（即使它是一个选择器）？就像这样：

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

- Adam Bellaire

---

我之前将它放在了括号中，但我尝试着做更多。可以看下面或者查看我的后续回答，具体视情况而定。链接在这里：https://dev59.com/anVC5IYBdhLWcg3wZwNT - Abs

Answer 2

这应该可以起作用：

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

- JimmyP

---

这似乎可以工作，但它似乎没有遵循文档建议的括号语法。也许那些括号不是必要的？ - Abs

Answer 3

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

这对你来说都会很顺利！在我这里也一样。您的HTML不需要进行任何更改。

- Mrigesh Raj Shrestha

---

我看到了（在发帖之后）你已经得到了解决方案。祝你有美好的一天！ - Mrigesh Raj Shrestha