带有 jQ​​uery UI 1.8.2 的可排序 + 嵌套列表 [英] Sortable + nested lists with jQuery UI 1.8.2

问题描述

这个问题已经结束了，但似乎没有人遇到过和我一样的问题.

当我做这样的事情时

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

我希望它正常工作".总的来说，确实如此.我可以拖动任何 <li>从任何列表到任何其他列表，以及该

的任何子列表；被它拖着.

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

http://jsbin.com/ewuxi3/

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

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

解决方案

发生这种情况是因为 Sortable 并不真正知道您是位于嵌套的

之上还是包含它的那个之上.一种解决方案是使用这样的结构:

$(document).ready(function() {$('#sortable-category').sortable({项目:'li'，容差元素:'>div'});});

* {box-sizing: 边框框；列表样式:无；}升 >立>div {底边距:5px；边框底部:1px 实心 #ddd；}呃，升 >立>div {显示:块；宽度:100%；向左飘浮;}升 >李{显示:块；宽度:100%；底边距:5px；向左飘浮;边框:1px 实心#ddd；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><ul id="sortable-category"><li><div>项目 1</div><ul><li><div>子项目 1</div>

<li><div>子项目 2</div><li><div>项目 2</div><li><div>项目 3</div>

并设置选项 toleranceElement: '>div'.我不知道为什么它没有记录在案，但它就在那里，它告诉 Sortable 在计算交点时只考虑

.

如果你有兴趣，我最近开发了一个插件，它使嵌套排序更容易，允许动态创建新的嵌套列表.

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.

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/

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?

解决方案

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:

$(document).ready(function() {
  $('#sortable-category').sortable({
    items: 'li',
    toleranceElement: '> div'
  });
});

* {
  box-sizing: border-box;
  list-style: none;
}

ul > li > div {
  margin-bottom: 5px;
  border-bottom: 1px solid #ddd;
}

ul,
ul > li > div {
  display: block;
  width: 100%;
  float: left;
}

ul > li {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  float: left;
  border: 1px solid #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<ul id="sortable-category">
  <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.

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

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