問題タブ [angular-cdk-drag-drop]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
0 に答える
219 参照

angular - @angular/cdk を使用したドラッグ ドロップでドロップのイベント データが正しくない

ドラッグドロップの例を見てきましたが@angular/cdk、ほとんどすべてがリストの並べ替えと、異なるリスト間でのアイテムのドラッグに関するものです。

アイテムのリスト (ファイルまたはフォルダーとして指定された各アイテム)があり、リストの1 つ以上のファイル アイテムをドラッグして、同じリスト内のフォルダーアイテム...そしてそこに移動します(もちろん、API呼び出しによって処理されます)。

そのため、通常の並べ替えの実装は機能しません (並べ替え可能なリスト内のアイテムは、ホバー時に邪魔にならないように移動します)。

SO に関するいくつかの質問をして、各項目を としてマークする必要があることを理解しましたcdkDropList。だから、これはこれまでの私の実装です:

ただし、イベント データには、ドラッグされているアイテム (ファイル アイテム) に関する情報しかありません。以下のコードでは、、、event.previousContainer.dataおよびevent.container.dataすべてitemが同じオブジェクト (ドロップされるファイル項目) を参照しています。

ここで正確に何が間違っているのか教えてください。ありがとう。

編集: これは stackblitz での複製です: https://stackblitz.com/edit/angular-ivy-edaftg

0 投票する
1 に答える
162 参照

angular - ngbDropdown が cdkDrag Angular 11.0.3 で動作しない

ngbDropdownメニュー項目をクリックしても閉じません。外側のcdkdragdiv は正常に機能しますが、cdkdrag の内側では機能しません。cdkDrag を削除してみましたが、正常に動作しました。と のバージョンも変更しようとしましngbDropdowncdkDrag。で手動インストールbootstrapを使用する場合も正常に機能しますjQuery

0 投票する
0 に答える
274 参照

angular - Angular Material Multi Drag Drop、ドラッグドロップを特定のドロップリストのみに制限

親愛なるすべての Angular グル...

オンラインで素晴らしいAngular Materialマルチドラッグドロップの例を見つけたので、ListAからListBへのドラッグドロップのみを許可し、ListBからListAへのドラッグドロップを無効にしたいと考えていました。(スタックブリッツのリンクを下に添付)

何時間も試してみましたが、まだこれを理解できませんでした... Angular の専門家がこれについて私を助けることができますか?

https://stackblitz.com/edit/angular-multi-drag-drop-3part-vxkzje?file=src/app/multi-drag-drop.component.ts