2

ドラッグ&ドロップリストパッケージ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}}もありません。この作業を行うためにデータモデルで行う必要があることはありますか?

答えて

2

これに加えて、明らかにChrome 50には、ドラッグ中に表示されるゴーストコピーのバグがあり、それが消える可能性があります。この問題と解決方法の概要は、https://github.com/marceljuenemann/angular-drag-and-drop-lists/issues/256#issuecomment-231742499です。

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

個人的に、私は次のように追加して、それを解決しました

1

これはデータモデルに関するものではないことが判明しました。それはポジショニングに関するものでした。この特定のライブラリは、dnd-listのすべての子が相対的な位置付けを持ち、ng-repeatとdndDraggableでタグ付けされた子はの静的な位置指定を持つと考えています。静的な位置決めに関する部分は、はっきりとは分かりませんでした。

関連する問題