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

Question

我是 jQuery 的新手，我在使用 jQuery UI 的 sortable 时非常吃力。

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

我的页面有一个组列表，每个组包含一个项目列表。我想让用户能够执行以下操作:

1. Reorder the groups
2. Reorder the items within the groups
3. Move the items between the groups

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

<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({}) 对列表进行排序; 在文档就绪函数中。我尝试使用 sortable 的 connectWith 选项使其工作，但我失败了。我想要做的是将每个 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'], ... }