Question

我正在使用angular-ui sortable version 1.2

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

jquery-ui-sortable定义了一系列事件，包括receive event

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

见codepen sample。您可以看到我可以通过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或目标列表。

如果我们想了解一个动作以及哪个项目被移动到哪种列表，我们该怎么办？

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

可以通过Angular的$watch函数确定哪个列表是drop-target。我们只是听取列表的更改并知道哪个列表已被修改。需要注意的是：源列表和目标列表正在更改，但目标列表最后会更改（请参阅上面的事件顺序）。如果我们以这种方式倾听变化：

$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];
});

我们有所有信息可以了解哪个项目被移动到什么样的列表以及从哪个和哪个索引：

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 ，包含大量调试代码，显示拖拽过程中可用的信息类型。

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

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

1 个答案: