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

Question

我正在使用 angular-ui sortable version 1.2

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

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

在该事件处理程序中，我找不到访问被移动的 Angular 模型项及其新父列表的方法。

看到这个 codepen sample .
您可以看到我可以通过 scope() 访问该项目在 update事件，但不在 receive 中事件。

对处理这些 Action 的方法有什么建议吗？通过 receive事件或其他？

Answer 1

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

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

$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 没有提供这些信息， Angular 包装器也没有暴露目标 model以任何方式 :(

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

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

被移动的项目可以通过 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, fromIndex, toIndex, $scope.dropTarget);
},

PLUNKR使用大量调试代码显示在拖放过程中可用的信息类型。

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