JQueryUI:创建两个拖放列表的最佳方式，其中一个是可排序的，另一个在拖放时重新排序

JQueryUI: Best way to create two drag/drop lists where one is a Sortable, the other re-sorts on the drop?

本文关键字：拖放 排序 另一个 新排序 一个 列表 两个 创建 最佳 JQueryUI 方式      更新时间：2023-09-26

我有以下场景。我有一个很长的列列表，它们由两个特定的<ul>列表中的<li>对象表示。左侧是用户可以选择的所有字段。在右侧，是用户从左侧拖放所需字段的位置。从本质上讲，此场景用于为动态报表构建列的有序列表。

使用JQueryUISortable()方法，我很容易地创建了用于根据需要拖放这些列<li>元素的列表。当将内容从左列表拖动到右列表时，一切都很完美，因为我希望我的用户能够为他们的报告排序列。

但是，如果用户将项目从右侧列表拖到左侧，（例如，他们决定不包括之前添加的列）我想将该项目添加回左侧的Sortable()列表，但我希望它被放置在特定的、预先排序的位置，而不是位于该列所在的元素下方。

满足这种需求的最佳方法是什么？我应该为左侧列容器使用JQueryUI Sortable()对象，并在数据被丢弃时使用它，还是有更好的JQuery工具来完成作业？如果我应该将左侧列表定义为Sortable()对象，我应该如何修改它，以便在删除操作完成后正确地重新排列列表？

这是一个JSFiddle，我用它来实现这些列表的基本机制。再一次，右边的名单正按照我的意愿行事。但是，我希望左手边总是根据用于强制排序的值进行排序。对于本例的情况，左侧应始终根据每个<li>上定义的data-sort属性进行排序。

您可以根据特定的data-sort属性对#left-list中所有丢弃的项目进行排序。您必须使用update回调，它在每次更新时都会触发，而不是stop回调。

$("#left-side").sortable({
  connectWith: "#right-side",
  update: function(e, info) {
    $(this).children('li').sort(function(a, b) {
        return +a.dataset.sort - +b.dataset.sort;
    }).appendTo(this);
  }
});
$("#right-side").sortable({
  connectWith: "#left-side"
});
// code to set relevant data-sort attribute for each LIs
$("#left-side, #right-side").find('li').attr('data-sort', function() {
  return $(this).index('body ul.ui-sortable li');
});
ul {
  border: 1px solid Black;
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: top;
}
li {
  background-color: Azure;
  border-bottom: 1px dotted Gray
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<h1>Click items to select them</h1>
<ul id="left-side">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
<ul id="right-side">
  <li>Four</li>
  <li>Five
  </li>
  <li>Six</li>
</ul>

相关文章：