使用jQuery UI 1.8.2进行可排序+嵌套列表 [英] Sortable + nested lists with jQuery UI 1.8.2

问题描述

这个问题到处都是，但是似乎没有人遇到与我相同的问题.

This question is all over SO, but no one seems to have had the same problem as I have.

当我做这样的事情

$(function(){
    $('#unique-ul').sortable({items:'li'});
});

我希望它正常工作".总的来说，它做到了.我可以拖动任何< li>从任何列表到任何其他列表，以及该< 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.

但是，在拖动时，似乎对应该将其放置在何处感到困惑.这是一个使用1.8.0的示例；它显示相同的行为.

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.

http://jsbin.com/ewuxi3/

关于此问题我发现的所有其他答复使我相信jQuery UI支持此行为.例如，这是针对嵌套可拖动对象针对1.7注册的错误: http://dev.jqueryui.com/ticket /4333

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

我找不到其他遇到此问题的人，因此表明我做错了.有任何线索吗?

I can't find anyone else who has had this issue so it suggests I am Doing It Wrong. Any clues?

推荐答案

之所以会发生这种情况，是因为Sortable并不真正知道您是位于嵌套的<li>之上还是包含嵌套的<li>.一种解决方案是使用这样的结构:

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:

<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>

并设置选项toleranceElement: '> div'.我不知道为什么没有对此文件进行记录，但是它在那里，它告诉Sortable在计算交点时仅考虑<div>.

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.

如果您有兴趣，我最近开发了一个插件，该插件使嵌套排序更容易，从而使即时创建新的嵌套列表.

In case you are interested, I recently developed a plugin which makes nested sorting easier, allowing to create new nested lists on the fly.

这篇关于使用jQuery UI 1.8.2进行可排序+嵌套列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！