jQuery 带有 jQuery UI 1.8.2 的可排序 + 嵌套列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3308672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sortable + nested lists with jQuery UI 1.8.2
提问by Altreus
This question is all over SO, but no one seems to have had the same problem as I have.
这个问题已经结束了，但似乎没有人遇到过与我相同的问题。
When I do something like this
当我做这样的事情时
$(function(){
$('#unique-ul').sortable({items:'li'});
});
I'd expect it to "just work". By and large, it does. I can drag any <li> from any list to any other list, and any sublist of that <li> is dragged with it.
我希望它“正常工作”。总的来说，确实如此。我可以将任何 <li> 从任何列表拖动到任何其他列表，并且该 <li> 的任何子列表也随之拖动。
However, when dragging, it seems to get really confused about where it should be dropped. Here's an example using 1.8.0; it displays the same behaviour.
但是，在拖动时，它似乎对应该将其拖放的位置感到非常困惑。这是一个使用 1.8.0 的例子；它显示相同的行为。
All the other responses I've found about this lead me to believe that this behaviour is supported by jQuery UI; for example, here is a bug registered against 1.7 about nested draggables: http://dev.jqueryui.com/ticket/4333
我发现的所有其他回应都让我相信 jQuery UI 支持这种行为；例如，这是针对 1.7 注册的关于嵌套可拖动对象的错误：http: //dev.jqueryui.com/ticket/4333
I can't find anyone else who has had this issue so it suggests I am Doing It Wrong. Any clues?
我找不到其他遇到过这个问题的人，所以这表明我做错了。有什么线索吗？
回答by mjsarfatti
this happens because Sortable doesn't really know if you are above the nested <li>or the one that contains it. One solution is to use a structure like this:
发生这种情况是因为 Sortable 并不真正知道您是在嵌套之上<li>还是在包含它的之上。一种解决方案是使用这样的结构：
<ul>
<li><div>Item 1</div>
<ul>
<li><div>Subitem 1</div></li>
<li><div>Subitem 2</div></li>
</ul>
</li>
<li><div>Item 2</div></li>
<li><div>Item 3</div></li>
</ul>
and set the option toleranceElement: '> div'. I don't know why it isn't documented, but it's in there and it tells Sortable to take into consideration just the <div>when calculating intersections.
并设置选项toleranceElement: '> div'。我不知道为什么它没有记录在案，但它就在那里，它告诉 Sortable<div>在计算交点时只考虑 Sortable 。
In case you are interested, I recently developed a pluginwhich makes nested sorting easier, allowing to create new nested lists on the fly.
如果您有兴趣，我最近开发了一个插件，它使嵌套排序更容易，允许动态创建新的嵌套列表。
