javascript - (图形)树结构中的 jQuery sortables

Question

我在尝试在图形树状结构中使用 jQuery-ui 可排序交互时遇到问题。

我希望能够将子项目从树中的一个位置拖到树中的另一个位置。现在我只能将它们移动到同一层。

这是我的树结构:

<div class="parent item">
  <div class="data"><span>Parent Item</span></div>
  <div class="children">
    <div class="item" style="width: 50%;">
      <div class="data"><span>Child Item</span></div>
      <div class="children">
        <div class="item" style="width: 50%;">
          <div class="data"><span>Child Item</span></div>
          <div class="children">
          </div>
        </div>
        <div class="item" style="width: 50%;">
          <div class="data"><span>Child Item</span></div>
          <div class="children">
          </div>
        </div>
      </div>
    </div>
    <div class="item" style="width: 50%;">
      <div class="data"><span>Child Item</span></div>
      <div class="children">
        <div class="item" style="width: 50%;">
          <div class="data"><span>Child Item</span></div>
          <div class="children">
          </div>
        </div>
        <div class="item" style="width: 50%;">
          <div class="data"><span>Child Item</span></div>
          <div class="children">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

(它生成的屏幕截图)

这里是 jQuery-ui 可排序函数

$(".children").sortable({
   items: ".item",
   containment: ".parent",
   connectWith: ".children"
});

我在 CodePen 中重新创建了这个 http://codepen.io/viralpickaxe/pen/wfqxc

Answer 1

这可能无法完全解决您的问题，但 sortable 开始以正确的方式工作...

你应该给子类添加最小高度或溢出，因为它的高度为 0 你不能在那里放置元素

.children{
    min-height:20px;
}

此外，我建议您使用占位符:

.placeholder{
    background:red;
}

和 js:

$(".children").sortable({
   items: ".item",
   containment: ".parent",
   connectWith: ".children",
   placeholder:'placeholder'
});