angular-拖放列表拖动的元素消失(chrome)

Question

我正在使用 angular-拖放列表包 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) 标识的正在拖动的元素将显示为没有内容的正确大小的红色块。

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

==更新==

所以，我意识到如果你在 div 中塞入一些乱码，它就会出现。但是 span 和 {{item.title}} 都没有。您是否需要对数据模型做些什么才能使这项工作正常进行？

Answer 1

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

Answer 2

除此之外，显然 Chrome 50 存在一个错误，即在拖动过程中显示的幻影副本可能会导致它消失。此处概述了问题和解决方案：https://github.com/marceljuenemann/angular-drag-and-drop-lists/issues/256#issuecomment-231742499.

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

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

angular-拖放列表拖动的元素消失(chrome)

angular-drag-and-drop-lists dragged element disappears (chrome)

javascript

drag-and-drop

angularjs

angulardraganddroplists