带有 jQ​​uery UI 1.8.2 的可排序 + 嵌套列表

Posted 2023-02-24

【中文标题】带有 jQ​​uery UI 1.8.2 的可排序 + 嵌套列表

【英文标题】：Sortable + nested lists with jQuery UI 1.8.2

【发布时间】：2011-03-19 12:43:55

【问题描述】：

这个问题到处都是，但似乎没有人遇到过和我一样的问题。

当我做这样的事情时

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

我希望它“正常工作”。总的来说，确实如此。我可以将任何

从任何列表拖动到任何其他列表，并且该 的任何子列表都被拖动。

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

http://jsbin.com/ewuxi3/

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

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

【参考方案1】：

发生这种情况是因为 Sortable 并不真正知道您是在嵌套的 <li> 之上还是包含它的那个之上。一种解决方案是使用这样的结构：

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

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

如果您有兴趣，我最近developed a plugin 使嵌套排序更容易，允许动态创建新的嵌套列表。

【讨论】：

你的插件看起来很棒——我玩过这个演示，有空我会看看自己实现它。

这看起来是BOSS。我整个下午都在试图找到像这样简单但实际上有效的东西！谢谢！

谢谢mjsarfatti！ toleranceElement: '> div' 正是我所需要的。

这个可排序插件是否适用于其他任何东西li？我有一堆元素，包括 div、img、ul>li、a、span 等，我想在它们上面应用nested sorting。

Awesoem 插件，但是是否可以将任何项目拖到第三个或更多孩子以下？