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

Question

我正在使用angular-ui可排序版本1.2

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

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

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

请参阅此codepen示例.你可以看到,我可以通过访问该项目scope()的update事件,而不是在receive事件.

有关处理这些举措的方法的任何建议吗？通过receive活动或其他方式？

Answer 1

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

如果您有一个项目列表并且只想重新排序列表,则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);
   }
};

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

连接2个项目列表

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

开始:我们可以访问将要移动的项目,包括scope此项目.

更新:我们可以访问包含scope此项目的移动项目.

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

已删除:项目已从源列表中删除.将scope不再有效(例如undefined).

已收到:该项目即将被删除在第二个列表中.scope仍然undefined,我们只能访问sender例如拖动源.

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

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

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

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

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

哪个列表是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, fromIndex, toIndex, $scope.dropTarget);
},

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

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