在（图形）树结构中的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

这可能无法完全解决您的问题，但可以按照正确的方式开始排序......

你应该在课堂上添加min-height或overflow，因为它不能将元素放在那里

.children{
    min-height:20px;
}

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

.placeholder{
    background:red;
}

和js：

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

Answer 2

这不是一个完整的答案，但您可以使用draggable和droppable代替sortable找到解决方法：

$(".item").draggable( { appendTo: "body",
                        helper: "clone"})
          .droppable( {  drop: function( event, ui ) {
                               ui.draggable.appendTo( this );
           } });

http://codepen.io/anon/pen/stDik

还有一些事情要做（设置一个大小来清空子项，以便他们可以接收新的，在用户拖动项目时更新目标位置等），但基本功能似乎正常。