3

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

<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使用on似乎很常见.dndDraggingSource，所以我很确定还有另一个 DOM 元素被拖来拖去。那个 DOM 元素是什么，我如何检查它？根据行为，我认为还有另一个元素被拖来拖去。但是，如果您检查 angular-drag-and-drop-lists.js 中的源代码，则该element.on('dragstart', function() {}块不会做任何事情来复制带有.dndDraggingSource.

== 更新 ==

所以，我意识到，如果你在 div 中塞进一些乱码，它就会出现。但是跨度和确实都不是{{item.title}}。您需要对数据模型做些什么来完成这项工作吗？

4

2 回答 2

4

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

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

ul[dnd-list] .dndDragging {
    transform:translateZ(0);
}
于 2016-09-08T03:08:33.670 回答
1

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

于 2016-08-16T21:54:12.573 回答