jquery-ui-sortable - jQuery Sortable如何将所有孩子设置为放置目标

Question

我发现了这个伟大的插件： https ://johnny.github.io/jquery-sortable/

我希望有可能将 daggable 元素放入每个孩子。我试图这样做添加一个空的<ol></ol>，但它在运行时不起作用。在构建可排序树之前，我必须这样做。但我做的一切都是动态的。

并根据文档：

名称：drop
默认值：true
描述：如果为 true，则可以将项目拖放到此容器上

所以我知道它应该开箱即用？

请帮忙。

Answer 1

我想通了。

工作解决方案：

$("ol.sortable").sortable({
  // animation on drop
  onDrop: function  (item, targetContainer, _super) {
    var clonedItem = $('<li/>').css({height: 0})
    item.before(clonedItem)
    clonedItem.animate({'height': item.height()})

    item.animate(clonedItem.position(), function  () {
      clonedItem.detach()
      _super(item)
    })
  }
})

我认为删除这个片段：

  group: 'simple_with_animation',
  pullPlaceholder: false,

从配置帮助。

Answer 2

看起来嵌套列表仅在插件初始化时li元素具有嵌套容器（anol或 an ）时才起作用。ul

你提到你动态地构建你的树。因此，每次li在树中添加新节点时，都需要执行以下行以使新节点可嵌套：

$li.removeData('subContainers');

只需确保li有一个ol或一个ul，即：

<ol class="sortable">
    ...
    <li>
        Your New Node
        <ol></ol>
    </li>
    ...
</ol>

---

现在，为什么这条线$li.removeData('subContainers');有效？
查看插件代码，您可能会注意到，当插件决定是否允许在列表项中放置时，它会调用一个方法hasChildGroup（参见第 506 行），该方法又调用另一个方法getContainerGroup（参见第 572 行） ，它计算并存储有关子节点的信息，以及悬停节点的可能放置目标。计算只发生一次，随后的每次丢弃尝试都将重用此数据。

这正是我们应该攻击并从节点中删除此信息data以使其下次重新计算数据的原因。

'subContainers'是插件用来获取信息并找到可能的放置目标的关键。因此，应该从节点的data.