使用JQuery UI双向排序/未排序拖放

Two Way Sorted/Unsorted Drag Drop with JQuery UI

本文关键字：排序 拖放 JQuery UI 使用      更新时间：2023-09-26

我有一个复杂的拖放场景，我只是想不通。 我想出的是：jsfiddle.net/aTjMG/2/

在左边，我有一个名字列表。 在右边，我有一组团队。 左侧的列表应按字母顺序排列，不可排序。 用户应该能够通过从左侧列表拖动到团队来将人员分配到团队。 分配给团队的人员应该能够排序或移动到另一个团队，或移回未分配的池。

我可以从未分配的池移动到任何团队。 我可以对团队中的人进行排序。 我无法从这里弄清楚的是：

  1. 如何在团队之间移动。
  2. 如何从团队移动到未分配。
    3. 当此人
  3. 掉落到其他地方时，如何从当前位置删除此人
  4. 如何防止一个人(在团队中(在我对人员进行排序时被重复

我认为最大的问题是我不知道如何抓住拖放的"下降"以将未分配的人员更改为已分配。

朝正确的方向踢将不胜感激。 一个做到这一点的例子将不胜感激！

如果我正确理解问题，这实际上只是多个排序列表。

更新你的小提琴：http://jsfiddle.net/aTjMG/8/

关键是简单地将它们全部声明为sortable，根本不弄乱draggable，这用于更自由形式的拖放。 

$(function() {
  $( ".sortable" ).sortable({
    connectWith: ".sortable"
  }).disableSelection();
});

在UI文档中也有一个例子：http://jqueryui.com/sortable/#connect-lists

相关文章：