不允许在可排序列表中排序，仅使用 connectWith 将它们移动到不同的可排序列表

Posted 2023-05-08

【中文标题】不允许在可排序列表中排序，仅使用 connectWith 将它们移动到不同的可排序列表

【英文标题】：Don't allow sorting in a sortable list, only use connectWith to move them to a different sortable list

【发布时间】：2020-07-02 09:36:51

【问题描述】：

我正在使用 jQuery UI 的 .sortable 功能。我有列表 a 和列表 b。我希望用户能够：

将项目从列表 a 拖动到列表 b，但不从列表 b 拖动到列表 a 对列表 b 中的项目进行排序，但在列表 a 中

不是

我的代码只满足第一个要求。我无法停止对列表 a 中的项目进行排序。

虽然答案 https://***.com/a/14442218/5798798 中的代码会自动反转列表中完成的任何排序，但它不会阻止在列表中进行排序（这正是我正在寻找的）。

$("#sortable").sortable(
  connectWith: "#sortable2"
);

$("#sortable2").sortable();

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>List A</p>
<div id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</div>
<p>List B</p>
<div id="sortable2">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</div>

JsFiddle：http://jsfiddle.net/g5nxjk0e/1/

请注意，可以将列表 a 拖入多个列表

【问题讨论】：

不要在列表 A 上使用 Sortable。在列表 A 上使用 Draggable。jqueryui.com/draggable/#sortable

【参考方案1】：

请查看：https://jqueryui.com/draggable/#sortable

例子：

$(function() 
  $(".drag > li").draggable(
    connectToSortable: ".sort",
    revert: "invalid"
  );
  $(".sort").sortable();
);

ul 
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;


li 
  margin: 5px;
  padding: 5px;
  width: 150px;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>List A</p>
<ul id="drag-1" class="drag">
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>
<p>List B</p>
<ul id="sort-1" class="sort">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<p>List c</p>
<ul id="sort-2" class="sort">
  <li>Apple</li>
  <li>Blueberry</li>
  <li>Cherry</li>
</ul>

【讨论】：

谢谢。如果我有多个可以将列表 A 拖到的可排序列表，它将如何工作？

@TheCodesee 您将需要使用正确的选择器：api.jqueryui.com/draggable/#option-connectToSortable 考虑使用适用于许多可排序或列出所有 ID 的类选择器。查看更新。