ドラッグ&ドロップリストパッケージ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
を使用するのが一般的だと思われますので、ドラッグされている別のDOM要素があると確信しています。そのDOM要素とは何ですか?それをどうやって調べることができますか?行動に基づいて、私は別の要素が引きずられていると思う。しかし、angle-drag-and-drop-lists.jsでソースコードを調べると、element.on('dragstart', function() {}
ブロックは、.dndDraggingSource
というタグが付けられた要素のコピーを作るために何もしません。
==更新==ので
、私はあなたがdiv要素の中にいくつかちんぷんかんぷんを詰め込む場合、それが現れることに気づきました。しかし、スパンも{{item.title}}
もありません。この作業を行うためにデータモデルで行う必要があることはありますか?