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

Posted 2023-05-08

【中文标题】angular-drag-and-drop-lists 拖动的元素消失（chrome）

【英文标题】：angular-drag-and-drop-lists dragged element disappears (chrome)

【发布时间】：2016-12-23 06:13:02

【问题描述】：

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

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

== 更新 ==

所以，我意识到如果你在 div 中塞进一些乱码，它就会显示出来。但是 span 和 item.title 都没有。您需要对数据模型做些什么来完成这项工作吗？

【参考方案1】：

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

就个人而言，我通过添加以下内容来解决它：

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

【参考方案2】：

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