淘汰赛可排序的嵌套项目不能被拖入无子元素答案

【问题标题】：Knockout-sortable nested items can't be dragged into childless element淘汰赛可排序的嵌套项目不能被拖入无子元素
【发布时间】：2017-04-22 03:18:47
【问题描述】：

我正在使用knockout-sortable，我的目标是nestedSortable 行为。我制作了一个轻量级小提琴example，除了一件事之外一切都很好：我不能将孩子转移到最初没有它的元素。

在那里打印子元素：

<div data-bind="if: children().length > 0">
    <ul data-bind="sortable: { template: 'tpl', data: $data.children }"></ul>            
</div>

即使取消检查，仍然没有空间放置子元素。嵌套可排序的淘汰赛有什么好的解决方案吗？

【问题讨论】：

【解决方案1】：

你只需要给它一些高度。我把if拿出来，在ul上放个类

<div>
  <ul class="sort-drop" data-bind="sortable: { template: 'tpl', data: $data.children }"></ul>
</div>

并将其设置为红色，以便您可以看到它

.sort-drop:empty {
  background-color: red;
  min-height: 5px;
}

【讨论】：