33

我是 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 中的行为非常奇怪，当您尝试重新排序时会覆盖列表项）。我会接受你的一个答案并对另一个投票，但如果你对过滤有想法/建议，我想听听。

4

3 回答 3

24

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

...sortable({connectWith:['.group'], ... }
于 2008-11-21T23:05:17.670 回答
17

这应该有效：

$('#groupsList').sortable();
$('.itemsList').sortable({
    connectWith: $('.itemsList')
});
于 2008-11-22T09:53:05.443 回答
2 
 $(function() {
            $( "#groupItems1, #groupItems2, #groupItems3" ).sortable({
                connectWith: ".itemsList"
            }).disableSelection();
        });

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

于 2012-06-05T12:14:54.397 回答