Jquery ui 在可排序的ui中处理跨列表的项目移动？

我正在使用

我想处理从一个列表到另一个列表的项目移动，并相应地更新后端

jQueryUISortable定义了一组事件，包括

在该事件处理程序中，我无法找到访问已移动的角度模型项及其新父列表的方法

看这个。 您可以看到，我可以通过

update

事件中的

scope（）

访问该项目，但不能通过

receive

事件访问该项目

---

有什么建议可以解决这些问题吗？通过

接收

事件或其他方式？

对一个列表中的项目重新排序

如果您有一个项目列表，并且只想对列表重新排序，则UI sortable的行为非常直观。在这种情况下，如果控制器中有如下对象数组，请执行以下操作：

$scope.yourObjects = [
   {title:'Alabama'}, {title:'Ohio'}, {title:'Colorado'}   
];

在html中，您可以使用

ng repeat

创建这些项目的列表：

<ul ui-sortable="sortableOptionsA" class="list items-container" ng-model="yourObjects">
   <li class="item sortable" ng-repeat="item in yourObjects">{{item.title}}</li>
</ul>

如您所见，在

stop

功能中，我们可以访问所有需要了解移动情况的相关信息

连接两个项目列表

现在问题有点复杂了。UI Sortable没有提供任何关于投放目标的信息，我们无法以任何方式直接使用这些信息。如果我们将一个项目从一个列表移动到另一个列表，将触发以下事件：

开始：我们可以访问将要移动的项目，包括此项目的

范围

更新：我们可以访问移动的项目，包括此项目的
范围

现在该项目已从其源列表中删除

已删除：该项已从源列表中删除。
范围
不再有效（例如
未定义
）

已接收：该项将被删除到第二个列表中<代码>范围
仍然未定义
，我们只能访问
发送方
，例如拖动源

现在，该项被插入到目标列表中

更新
：项目将被丢弃在目标列表中。但是我们无法访问项
范围
，事件对象中也不存在目标对象。jQuery UI Sortable没有提供这些信息，angular wrapper也没有以任何方式公开目标
模型
：(

停止：如果拖放过程的所有步骤都已完成，则会触发停止事件。但我们也无法访问项目target
scope
或目标列表

如果我们想了解某个移动以及哪个项目被移动到了什么类型的列表中，我们该怎么办

在停止事件中，
ui.item.sortable.moved
可以访问移动的项目。这是我们移动的项目

哪个列表是放置目标可以通过Angular的
$watch
功能确定。我们只需聆听列表的更改，就知道哪个列表被修改了。一个警告：源列表和目标列表正在更改，但目标列表最终会更改（请参见上面的事件顺序）。如果我们以这种方式聆听更改：

$scope.dropTarget = null;
$scope.$watchCollection('lists[0].items', function() {
   console.log('watch 0');
   $scope.dropTarget = $scope.lists[0];
});
$scope.$watchCollection('lists[1].items', function() {
   console.log('watch 1');
   $scope.dropTarget = $scope.lists[1];
});

我们有所有的信息来了解哪个项目被移动到了什么类型的列表，以及什么是from和to索引：

stop:function(e, ui){
  var item = ui.item.sortable.moved;
  var fromIndex = ui.item.sortable.index;
  var toIndex = ui.item.sortable.dropindex;
  console.log(item, fromIndex, toIndex, $scope.dropTarget);
},

包含大量调试代码，显示拖放过程中可用的信息类型

备注：如果您将一项从“已连接列表”移动到“一个可排序列表”，则日志输出是错误的-因为“一个可排序列表”列表没有侦听器！
对。如果您检查我的代码笔，您会发现这正是我正在做的，只是在“接收”事件上，而不是在“停止”事件上，但在范围（）上是空的。@sagism请查看我编辑过的答案。两个连接的列表并不像我第一次想的那么简单。但问题是可以解决的。非常感谢您从index
/
到index
的
。使用Google很难找到它。
stop:function(e, ui){
  var item = ui.item.sortable.moved;
  var fromIndex = ui.item.sortable.index;
  var toIndex = ui.item.sortable.dropindex;
  console.log(item, fromIndex, toIndex, $scope.dropTarget);
},