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

【问题标题】：How do I move an item to an empty list between groups using jquery?如何使用 jquery 将项目移动到组之间的空列表？
【发布时间】：2018-11-30 20:43:17
【问题描述】：

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

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

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

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

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

提前致谢

【问题讨论】：

很可能是因为另一个列表为空时没有可见的高度，因此您无法触发它的“放置”。尝试在 CSS 中的 ul 上设置 min-height。虽然没有看到实际的 HTML，这只是一个猜测
@RoryMcCrossan 请在这里检查小提琴jsfiddle.net/8fc9a27v
感谢您的示例。问题正如我所怀疑的那样；由于目标元素没有占用高度。我为你添加了答案

标签： jquery html jquery-ui jquery-ui-sortable

【解决方案1】：

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

一种解决方案是在元素上设置min-height，以便它们始终占用 DOM 中的空间，即使是空的也是如此。试试这个：

.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 周围设置了一个边框，以便更清楚地显示最小高度设置。

【讨论】：