jQuery 拖动到父项时无法排序 div 如果为空

Question

我有可排序的 div 和 jQuery，如果其中没有现有元素，我无法将它们放回父 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