javascript - 如果拖入父级 div(如果为空)，jQuery 可排序不起作用

Question

我有 jQuery 的可排序 div，如果其中没有现有元素，我无法将它们放回到父 div 中。

有效的示例:https://jsfiddle.net/fchg7wb5/2/

但是取出黑框(父)之外的所有元素。然后尝试将元素拖回到父框中...它不起作用(如: https://jsfiddle.net/fchg7wb5/3/ )。

这是代码:

<style>
.parent {
  padding: 10px;
  border: 1px solid black;
  background-color: #fff !important;
  min-height: 100px;
}

.drag-element {
  padding: 10px;
  background-color: #227b84;
  margin-bottom: 10px;
  color: #fff;
}
</style>

<div id="sortable">
  <div class="parent drag-element">
  </div>

  <div class="drag-element">Bob</div>
  <div class="drag-element">John</div>
  <div class="drag-element">Sally</div>
  <div class="drag-element">Mary</div>
</div>

<script>
    $("#sortable").sortable({
      items: ".drag-element",
      revert: true
    });
</script>

Answer 1

您必须定义所有列表并使用 connectWith

工作示例:https://jsfiddle.net/Twisty/xqs9oyhg/

JavaScript

$("#sortable, .parent").sortable({
  items: ".drag-element",
  revert: true,
  connectWith: ".parent"
});

我还建议更好地使用items和handles，具体取决于您预期连接列表的复杂程度。

可能的重复:jQuery UI nested sortable