1

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

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

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

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

<div *ngFor="let item of items"
  cdkDropList
  [cdkDropListData]="[item]"
  (cdkDropListDropped)="onDrop($event, item)"
>
  <div class="test" cdkDrag>[{{item.type}}] {{item.name}}</div>
</div>

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

onDrop(event: any, item: ItemData) {
  console.log('drop event = ', event);
  console.log('event.previousContainer.data = ', event.previousContainer.data);
  console.log('event.container.data = ', event.container.data);
}

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

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

4

0 に答える 0