我是 jQuery 新手,并且在使用 jQuery UI 时遇到了很大的困难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({});
and $('.itemsList').sortable({});
in the 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 中的行为非常奇怪,当您尝试重新排序时会覆盖列表项)。我会接受您的一个答案并对另一个答案进行投票,但如果您对过滤有任何想法/建议,我很想听听。