Question

我正在使用angular-drag-and-drop-lists包here来创建拖放列表。但是，被拖动的元素总是消失。在所有演示中，您可以在使用鼠标移动时看到拖动的元素。但我无法在下面的实现中看到这个元素。

<div class="list-item"
     ng-repeat="item in items | filter:query"
     dnd-draggable="column"
     dnd-moved="items.splice($index, 1)"
     dnd-effect-allowed="move"
     dnd-selected="models.selected = item"
     ng-class="{'selected': models.selected === item}"
     draggable="true"
     >
     <div class="icon">
         <span class="some-button"></span>
     </div>
     <div class="title">
         {{item.title}}
     </div>
</div>

我已将css设置如下：

.dndDragging:not(.dndDraggingSource) {
    display: block;
    background-color: red;
}
.dndDraggingSource {
    display: none;
}
.dndPlaceholder {
    background-color: #ddd;
}

我能够看到占位符，并且我已经验证.dndDraggingSource {display: none}正确地使原始元素消失。但是，由.dndDragging:not(.dndDraggingSource)标识的被拖动元素将显示为正确大小的红色块，没有内容。

拖后幕后发生了什么？为什么这个拖动的元素在演示代码中正确显示？似乎在display: none上使用.dndDraggingSource是很常见的，所以我很确定还有另一个DOM元素被拖动。什么是DOM元素，我该如何检查它？基于行为，我认为还有另一个元素被拖延。但是如果你检查angular-drag-and-drop-lists.js中的源代码，那么element.on('dragstart', function() {}块就没有做任何事情来复制用.dndDraggingSource标记的元素。

==更新==

所以，我意识到，如果你在div中添加了一些乱码，它会显示出来。但是跨度和{{item.title}}都没有。您是否需要使用数据模型来完成这项工作？

Answer 1

除此之外，显然Chrome 50在拖动过程中显示的幻影副本存在错误，导致其消失。这里列出了问题和解决方案：https://github.com/marceljuenemann/angular-drag-and-drop-lists/issues/256#issuecomment-231742499。

就个人而言，我通过添加以下内容解决了这个问题：

ul[dnd-list] .dndDragging {
    transform:translateZ(0);
}

Answer 2

事实证明，这根本不是数据模型。这是关于定位。这个特定的库期望dnd-list的所有子节点都具有相对定位，并且那些用ng-repeat和dndDraggable标记的子节点具有静态定位。关于静态定位的部分并不是很明显。

angular-drag-and-drop-lists拖动元素消失（chrome）

2 个答案: