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

Question

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

我不希望A中的元素可排序。我只想将其从A拖到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