处理项目的角UI排序移动跨列表？ [英] Handling moving of item across lists in angular-ui sortable?

问题描述

我使用角UI排序1.2版本

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

I want to handle the move of an item from one list to another, and update the back-end accordingly.

的jQuery的UI可排序定义了一堆的事件，包括接收事件

jquery-ui-sortable defines a bunch of events, including the receive event

从该事件处理程序中，我无法找到一个方法来访问它感动角模型项目，其新的父目录。

From within that event handler, I cannot find a way to access the angular model item which was moved, and its new parent list.

请参阅此 codePEN样品。
你可以看到，我可以通过范围访问项目（）在更新事件，而不是在接收事件。

See this codepen sample. You can see that I can access the item via the scope() in the update event, but not in the receive event.

换一种方式来处理这些举措有什么建议？无论是通过接收事件或以其他方式？

Any suggestions for a way to handle these moves? either via the receive event or otherwise?

推荐答案

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

如果您有一个项目一个列表，只是要重新排序列表排序UI表现直观。在这种情况下怎么做，如果你有对象的数组在控制器下面这个：

UI sortable behaves intuitive if you have one list of items and just want to reorder the list. In this case you do the following if you have an array of objects in your controller like this:

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

在你的HTML，你可以使用 NG-重复创建这些项目的列表：

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

正如你所看到的，在停止函数，我们有机会获得我们所需要了解的运动被告知所有相关信息。

As you can see, in the stop function we have access to all relevant information we need to be informed about the movement.

连接2的产品清单

现在的问题是获取一点点复杂。 UI可排序没有给我们有关，我们可以以任何方式直接使用下拉式的目标信息。如果我们从一个列表中移动一个项目到另一个列表中的下列事件触发：

Now the problem get's a little bit complicated. UI Sortable gives us no information about the drop-targets that we can use directly in any way. If we move one item from one list to another list the following events are fired:

的启动的：我们有权访问将被移动，包括该项目的范围项目

start: We have access to the item that will be moved including the scope of this item.

的更新的：我们已经进入到移动包括该项目的范围项目

update: We have access to the item that is moved including the scope of this item.

现在的项目是从它删除源列表中的

Now the item is deleted from it's source list

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

removed: The item was removed from the source list. The scope is no longer valid (e.g. undefined).

的接收的：该项目是关于第二个列表中被丢弃。 范围还是未定义，我们只有到发送访问如：拖动源。

received: The item is about to be dropped in the second list. scope is still undefined, we have only access to the sender e.g. the drag source.

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

Now the item is inserted in the target list.

更新：该项目在目标列表中删除。但我们的项目没有获得范围也不会出现在事件对象目标对象存在。 jQuery的UI可排序没有提供这些信息和角的包装没有暴露目标模式以任何方式：（

update: The item is dropped at the target list. but we have no access to the item scope nor does there a target object exist in the event objects. The jQuery UI Sortable did not provide these information and the angular wrapper did not expose the target model in any way :(

的停止的：如果拖放过程中的所有步骤都完成后，的停止的事件。但我们也对项目目标没有访问范围或目标列表中。

stop: If all steps of the drag'n'drop process are done, the stop event is fired. But we have also no access to the items target scope or the target list.

我们可以做些什么，如果我们想获得地了解运动和项目被转移到什么样的名单？

What can we do if we want to get informed about a movement and which item was moved to what kind of list?

这是移动该项目是在停止的事件由 ui.item.sortable.moved 访问。这是我们的项目是被感动了。

The item that was moved is accessible by ui.item.sortable.moved in the stop event. This is our item that was moved.

这名单可以通过角的 $观看函数来确定下降目标。我们只听更改列表和了解，这名单进行修改。警告：源和目标列表都在变化，但目标名单最后被改变（见上面的事件顺序）。如果我们听这样的变化：

Which list is the drop-target can be determined by Angular's $watch function. We just listen to changes to the lists and know, which list was modified. One caveat: the source and the target list are changing, but the target list is changed at last (see the above event order). If we listen to the changes in this way:

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

我们拥有所有的信息去了解至极项目被转移到什么样的名单，什么的，从与指数有：

we have all information to get to know wich item was moved to what kind of list and what are the from and the to index:

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 有很多调试code那说明了什么样的信息在拖放过程中是可用的。

PLUNKR with a lot of debug code that shows what kind of information is available during the drag'n'drop process.

备注：如果从连接列表到一个排序列表移动一个项目日志输出是错误的 - 因为没有监听器一排序列表名单

Remark: if you move one item from the 'Connected lists' to 'One sortable list' the log output is wrong - because there is no listener to the 'One sortable list' list!

这篇关于处理项目的角UI排序移动跨列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！