AngularJS 多次拖放答案

【问题标题】：AngularJS Multiple drag and dropAngularJS 多次拖放
【发布时间】：2014-06-21 14:45:33
【问题描述】：

我正在编写使用 jQueryUI 进行多次拖放的指令。按住 CTRL 并选择元素可以进行多次排序。它工作正常，除非元素不改变位置（我拖动它，然后将它返回到同一个地方）。在这种情况下，元素消失了，尽管模型很好，并且正确显示了所有元素。

这就是我所做的事情。 http://jsfiddle.net/ndamnjanovic/swt48/3/

这就是我尝试手动插入 HTML 节点的原因，以防元素在同一位置返回。但在这种情况下，在我插入带有ui.item.after(elements).detach() 的元素后，元素会丢失相关的操作（单击它不会再触发 alertCity）。这是其他方法的小提琴。 http://jsfiddle.net/ndamnjanovic/EkVTW/11/

有什么想法吗？

【问题讨论】：

你为什么要使用这么旧的 Angular 版本？
是的，我加错了，我现在明白了。我改一下，谢谢关注。但是我不认为这是问题所在，因为在我的项目中我有最新版本，但它仍然无法正常工作。

标签： angularjs jquery-ui drag-and-drop jquery-ui-sortable

【解决方案1】：

我认为您自欺欺人地认为 Angular 正在为您管理此列表（过去一个小时内，我也是；））。由于您正在使用 jQuery 插件，可排序的 <ul> 的 DOM 似乎不再受 Angular 的控制。他们可能在某个时候重新渲染了某些东西，将其包装在容器中等。但这意味着您负责 DOM。删除后，您需要将删除的元素（draggedElements）重新插入到列表中的正确位置。

或者...您可以欺骗 Angular 为您管理列表。首先，将ng-if="cities" 添加到可排序的<ul>，然后将此代码添加到drop 回调的末尾：

                var temp = scope.collection.slice(0);
                scope.$apply(function(scope) {
                    while (scope.collection.length) scope.collection.pop();
                });
                scope.$apply(function(scope) {
                    for (var i = 0; i < temp.length; i++) scope.collection.push(temp[i]);
                });

只要值从false 更改为true，ng-if 指令就会导致 Angular 重新渲染内部组件（并重新初始化任何内部指令）。在这种情况下，我们使用两次对$apply 的调用，首先给集合一个假值，然后恢复它的内容。这会使ng-if 线路跳闸并导致列表重新呈现。

示例：http://jsfiddle.net/colllin/8dcXB/

【讨论】：

嗨，Collin，非常感谢您的帮助，我目前不在我的工作计算机旁，我会在靠近一台时检查此代码 :) 再次非常感谢！
顺便说一句，我不认为ngIf 是必要的。 ngRepeat 如果检测到列表中的更改，将进行重新渲染。我删除了ngIf，它似乎可以工作。）
没有你的调用，这一切都发生在同一个 $digest 循环中，所以ngRepeat 看不到差异（城市从数组中删除，然后在同一个索引处添加回）。没有任何区别，它不需要重新渲染。但是 jQuery（通过 sortable 插件）会删除 DOM 元素（但 ngRepeat 只查看内部数组，而不是 DOM）。
使用$apply()s，您首先在一个$diget 循环中清空城市数组（第一个$apply()），然后在第二个$digest 循环中再次填充它（第二个$apply() ）。因此，ngRepeat 在每个循环中发现差异并重新渲染 DOM。这不是一个非常有效的解决方案，但是要发现真正的问题并提供更好的解决方案，代码相当复杂：D
嘿，我被另一个项目卡住了，所以最后我设法看看这个。使用 $apply 的技巧奏效了。只有一件事，而不是弹出和推送数组的所有元素，我只在删除拖动的元素并将它们返回到列表（代码中已经存在的位置）时才添加 $apply。再次感谢！