jquery-ui – 处理以angular-ui排序的列表中的项目移动？

我正在使用 angular-ui sortable version 1.2

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

jquery-ui-sortable定义了一堆事件,包括 receive event

从该事件处理程序中,我找不到一种方法来访问已移动的角度模型项及其新的父列表.

见codepen sample.
您可以看到我可以通过更新事件中的scope()访问该项,但不能访问receive事件.

有关处理这些举措的方法的任何建议吗？通过接收事件或其他方式？

解决方法

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

如果您有一个项目列表并且只想重新排序列表,则UI可排序行为直观.在这种情况下,如果控制器中有一个对象数组,则执行以下操作,如下所示：

$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>

其中sortableOptions是：

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

如您所见,在停止功能中,我们可以访问所有相关信息,我们需要了解有关运动的信息.

连接2个项目列表

现在问题变得有点复杂了. UI Sortable不会向我们提供有关我们可以以任何方式直接使用的放置目标的信息.如果我们将一个项目从一个列表移动到另一个列表,则会触发以下事件：

start：我们可以访问将要移动的项目,包括此项目的范围.

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

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

已删除：项目已从源列表中删除.范围不再有效(例如未定义).

已收到：该项目即将被删除在第二个列表中.范围仍未定义,我们只能访问发件人,例如拖动源.

现在该项目已插入目标列表中.

更新：该项目被删除在目标列表中.但是我们无法访问项目范围,事件对象中也不存在目标对象. jQuery UI Sortable没有提供这些信息,角度包装器没有以任何方式暴露目标模型:(

停止：如果完成拖放过程的所有步骤,则触发停止事件.但我们也无法访问项目目标范围或目标列表.

如果我们想了解一个动作以及哪个项目被移动到什么样的列表,我们能做什么？

移动的项目可由stop事件中的ui.item.sortable.moved访问.这是我们移动的项目.

哪个列表是drop-target可以由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,toIndex,$scope.dropTarget);
},

PLUNKR有很多调试代码,显示在拖放过程中可用的信息类型.

备注：如果将一个项目从“已连接列表”移动到“一个可排序列表”,则日志输出错误 – 因为没有“一个可排序列表”列表的监听器！

jquery-ui – 处理以angular-ui排序的列表中的项目移动？

解决方法

相关文章