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: noneonを使用するのが一般的であるように思われる.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 および dndDruggable でタグ付けされた子が静的な位置を持つことを想定しています。静的ポジショニングに関する部分は明確ではありませんでした。

于 2016-08-16T21:54:12.573 に答える