限制原始列表中元素的排序

Question

我有 2 个可排序的列表。 A 和 B。当我从 A 拖动一个元素并将其悬停在 A 上时，A 中的元素会因占位符而移动。

我不希望 A 中的元素是可排序的。我只想将它从 A 拖到 B 并能够在放置元素之前在 B 中对其进行排序。

我不希望将占位符设置为隐藏，因为这会让人很难看到它在 B 中的放置位置。

谢谢

Answer 1

我从您的解释中得到的是，您希望能够将项目从列表 A 拖动到列表 B，但反之亦然。您还只希望列表 B 中的项目是可排序的，而不是列表 A。

考虑到这一点，这就是我想出的：

$('.list-A').on('mousedown', function() {
  // only allow the active item to be sortable
  $(this).sortable('option', 'items', $(this).find('.item:active'));
}).sortable({
  connectWith: '.list-B'
});

$('.list-B').sortable({
  items: '.item'
});

.sortable-list {
  padding: 10px;
  width: 200px;
  margin: 0 auto;
}

.item {
  list-style-type: none;
  text-align: center;
  padding: 5px 10px;
  margin: 4px 0;
  background: #AF1843;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <ul class="sortable-list list-A">
      <li class="item">list A1</li>
      <li class="item">list A2</li>
      <li class="item">list A3</li>
      <li class="item">list A4</li>
    </ul>
  </div>
  <div class="col-sm-6">
    <ul class="sortable-list list-B">
      <li class="item">list B1</li>
      <li class="item">list B2</li>
      <li class="item">list B3</li>
      <li class="item">list B4</li>
    </ul>
  </div>
</div>

这是fiddle