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

Posted 2023-05-08

【中文标题】限制原始列表中元素的排序

【英文标题】：Restrict sorting of elements in Original list

【发布时间】：2020-03-10 11:30:05

【问题描述】：

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

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

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

谢谢

【参考方案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