如果为空，则拖动到父 div 时，jQuery 可排序不起作用

Posted 2023-05-08

【中文标题】如果为空，则拖动到父 div 时，jQuery 可排序不起作用

【英文标题】：jQuery sortable not working when dragging into parent div if empty

【发布时间】：2019-11-30 23:42:05

【问题描述】：

我有使用 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>

【问题讨论】：

jsfiddle.net/8monbc6p这样怎么样？

@Jay Li id 不希望有额外的外部元素

您审核了吗：jqueryui.com/sortable/#empty-lists

另外，您的第二个列表未定义为可排序的，因此您无法将项目拖入其中。

【参考方案1】：

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

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

JavaScript

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

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

可能重复：jQuery UI nested sortable