javascript - jQuery UI : Best way to create two drag/drop lists where one is a Sortable, 其他办法就掉了吗？

Question

我有以下场景。我有一长串列，由 <li> 表示两个特定的对象 <ul>列出。左侧是用户可以选择的所有字段。在右侧，用户可以从左侧拖放他们想要的任何字段。本质上，此场景用于为动态报告构建有序的列列表。

使用 JQueryUI Sortable()方法，我已经轻松创建了用于拖放这些列的列表 <li>根据需要的元素。将内容从左侧列表拖到右侧时一切正常，因为我希望我的用户能够为他们的报告排序列。

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

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

Here is a JSFiddle我将其用于这些列表的基 native 制。同样，右侧列表的行为如我所愿。但是，我希望始终根据用于强制排序的值对左侧进行排序。对于此示例，左侧应始终按 data-sort 排序。在每个 <li> 上定义的属性.

Answer 1

您可以根据特定的 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>