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

我是jQuery的新手,我完全在使用jQuery UI sortable.

我正在尝试整理一个页面,以方便分组和订购商品.

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

重新排序组

重新排列组内的项目

在组之间移动项目

前两个要求没问题.我能够很好地对它们进行排序.问题在于第三个要求.我只是无法将这些列表相互连接.一些代码可能有帮助.这是标记.

  
  
Group 1  
    
  
      
Item 1.1
  
      
Item 1.2
  
    
  
  
  
Group 2  
    
  
      
Item 2.1
  
      
Item 2.2
  
    
  
  
  
Group 3  
    
  
      
Item 3.1
  
      
Item 3.2
  
    
  
  
  

我能够把对列表进行排序$('#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中表现得非常奇怪,当你尝试重新排序时会覆盖列表项).我会接受你的一个答案并在另一个上投票,但如果你有关于过滤的想法/建议,我想听听.

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

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

这应该工作:

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