如何使用 jquery 将项目移动到组之间的空列表？

Question

我有多个可排序列表。它可以重新排序组， 重新排序组内的项目，在组之间移动项目。

但是它不能将项目从一个组移动到另一个空组。

这里我需要将任何项目从 Group2 移动到 Group1

这是fiddle，我试过下面的代码

$(function(){
 $('#groupsList').sortable();
  $('.itemsList').sortable({
    connectWith: ['.group','.itemsList']
  });
});

提前致谢

Answer 1

问题是因为 .itemsList 元素为空时没有高度。因此，不可能在它们上触发与拖动相关的事件。

一个解决方案是在元素上设置 min-height，这样它们总是在 DOM 中占据 space，即使是空的。试试这个：

.itemsList {
  min-height: 10px;
}

$(function() {
  $('#groupsList').sortable();
  $('.itemsList').sortable({
    connectWith: ['.group', '.itemsList']
  });
});

li {
  background-color: #ffcb05;
  margin: 5px;
  padding: 5px;
  cursor: move;
}

div:not(.container) {
  background-color: #00274c;
  min-height: 30px;
  margin: 10px;
  padding: 10px;
  width: 200px;
  vertical-align: top;
  display: inline-block;
}

.group {
  min-height: 50px;
}

.itemsList {
  min-height: 10px;
  border: 1px dotted #bd9700;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="groupsList" class="groupsList">
  <li id="group1" class="group">Group 1
    <ul id="groupItems1" class="itemsList">

    </ul>
  </li>
  <li id="group2" class="group">Group 2
    <ul id="groupItems2" class="itemsList">
      <li id="item1-1" class="item">Item 1.1</li>
      <li id="item1-2" class="item">Item 1.2</li>
      <li id="item2-1" class="item">Item 2.1</li>
      <li id="item2-2" class="item">Item 2.2</li>
    </ul>
  </li>
  <li id="group3" class="group">Group 3
    <ul id="groupItems3" class="itemsList">
      <li id="item3-1" class="item">Item 3.1</li>
      <li id="item3-2" class="item">Item 3.2</li>
    </ul>
  </li>
</ul>

请注意，我在上面的示例中在 .itemsList 周围加了一个边框，以便更清楚地表明最小高度设置已到位。

如何使用 jquery 将项目移动到组之间的空列表？

How do I move an item to an empty list between groups using jquery?

html

jquery

jquery-ui

jquery-ui-sortable