如何连接多个排序列表彼此jQuery用户界面？ [英] How do I connect multiple sortable lists to each other in jQuery UI?

问题描述

我是新来的jQuery，和我完全使用挣扎jQuery的用户界面的排序。我试图把一个网页，以方便分组和项目的顺序。我的页面有组列表，并且每个组包含的项目的列表。我想，让用户能够做到以下几点：
 1.重新排序组
 2.重新排序的项目内的组
 3.将组之间的项目

I'm new to jQuery, and I'm totally struggling with using jQuery UI's sortable. I'm trying to put together a page to facilitate grouping and ordering of items. My page has a list of groups, and each group contains a list of items. I want to allow users to be able to do the following:
1. Reorder the groups
2. Reorder the items within the groups
3. Move the items between the groups

前两个要求是没有问题的。我可以对它们进行排序就好了。这个问题是在与第三个要求。我只是无法连接这些列表给对方。有些code可能的帮助。这里的标记。

The first two requirements are no problem. I'm able to sort them just fine. The problem comes in with the third requirement. I just can't connect those lists to each other. Some code might help. Here's the markup.

<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）的列表进行排序排序（{}）; 和 $（'。 itemsList'）排序（{}）; 在文档准备功能。我试着用 connectWith 选项排序，使其工作，但我失败了壮观。我想要做的是有连接到每一个 groupItemsX 列表，但它本身的每一个 groupItemsX 列表。我应该怎么办呢？

I was able to sort the lists by putting $('#groupsList').sortable({}); and $('.itemsList').sortable({}); in the document ready function. I tried using the connectWith option for sortable to make it work, but I failed spectacularly. What I'd like to do is have the every groupItemsX list connected to every groupItemsX list but itself. How should I do that?

我想我需要专门不是列表连接到其自身少说也有某种形式的循环引用。当然，我不工作与Excel，但似乎这样可能会导致某种永无止境的递归会导致堆栈溢出什么的。嗯。很抱歉的双关语。控制不住自己。

I was thinking I needed to specifically not connect a list to itself less there be some sort of circular reference. Granted, I'm not working with Excel, but it seemed like that could cause some sort of never ending recursion that would cause a stack overflow or something. Hmm. Sorry for the pun. Couldn't help myself.

不管怎样，我试图做这样的事情，这是行不通的：

Anyway, I was trying to do something like this, and it wasn't working:

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

我敢肯定，我已经完全错位的语法那里，我想这是我必须要问的问题摆在首位的原因。它甚至有必要或有益的性能，明智的筛选当前项目淘汰之列？

I'm sure I've completely mangled the syntax there, and I suppose that's the reason I had to ask the question in the first place. Is it even necessary or helpful performance-wise to filter the current item out of the list?

无论亚当和JimmyP所提供的答案在IE工作（尽管他们的行为真的很奇怪在Firefox中，覆盖列表中的项目，当您尝试重新排序）。我会接受你的答案之一，表决等，但如果你有意见/建议关于过滤，我想听听它。

Both of the answers provided by Adam and JimmyP worked in IE (although they behave really oddly in FireFox, overwriting list items when you try to re-sort). I'll accept one of your answers and vote on the other, but if you have ideas/ suggestions about the filtering, I'd like to hear it.

推荐答案

您可以包括你用于connectWith的语法？你把其他组的括号内（即使它是一个选择）名单？那就是：

Can you include the syntax you used for connectWith? Did you place the list of other groups inside brackets(even if it's a selector)? That is:

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

这篇关于如何连接多个排序列表彼此jQuery用户界面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！