代码之家 › 专栏 › 技术社区 › Mick

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

jquery-ui-sortable jquery-ui ajax jquery javascript

30

Mick · 技术社区 · 17 年前

sortable

我正试图把一个页面放在一起,以便于对项目进行分组和排序。

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

在组之间移动项目

<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 选择 可恶的 但我失败得太惨了。我想做的是每一个 groupItemsX groupItemsX

我在想,我需要明确地说,不要把一个列表与它本身联系起来,而不要有某种循环引用。当然,我没有使用Excel,但这似乎会导致某种永不结束的递归,从而导致堆栈溢出或其他情况。嗯,对不起,我说的是双关语。我情不自禁。

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

我肯定我已经完全弄乱了那里的语法,我想这就是我必须首先问这个问题的原因。是否有必要或有助于从列表中筛选出当前项?

Adam和JimmyP提供的两个答案都在IE中起作用(尽管它们在FireFox中的行为非常奇怪,当您尝试重新排序时会覆盖列表项)。我会接受你的一个答案,并对另一个进行投票,但如果你对过滤有什么想法/建议,我愿意听听。

3 回复 | 直到 8 年前

1

24

Rahul Gupta Jerod Venema 8 年前

你能介绍一下你的语法吗 connectWith ? 您是否将其他组的列表放在括号内(即使是选择器)?即:

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

2

17

James 17 年前

这应该起作用:

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

3

2

Mrigesh Raj Shrestha 14 年前

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

这对你来说很好!在这里为我做同样的事。不需要在HTML中进行任何更改。