如何在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>  

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

---

我想我需要特别没有将列表连接到自己，而不是有某种循环引用。当然，我不使用Excel，但似乎这可能导致某种永无止境的递归，这会导致堆栈溢出或其他什么。嗯。对不起，双关语。无法自拔。

无论如何，我试图做这样的事情，但它没有工作：

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

我确信我已经彻底破坏了那里的语法，我想这就是我首先要问这个问题的原因。在列表中过滤当前项目在性能方面是否有必要或有用？

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

Answer 1

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

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

Answer 2

这应该工作：

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

Answer 3

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

这对你来说一切都会好的！在这里为我做同样的事情。您的HTML无需更改。