Angular Material (Angular 8) のドラッグ アンド ドロップ ライブラリの問題に直面しています。
次のコードを開発しました。
<div class="example-container">
<div id="receiver-container" cdkDropListOrientation="horizontal" cdkDropList #receiver="cdkDropList"
class="example-list" (cdkDropListDropped)="drop($event)" [cdkDropListConnectedTo]="[sender]" fxLayout="row"
fxLayoutAlign="center center" fxLayoutGap="10px">
<div class="example-box" *ngFor="let singleReceiver of receiverSrc" cdkDrag>
<img class="img-images" [src]="singleReceiver">
</div>
</div>
</div>
<div class="example-container">
<div id="sender-container" cdkDropListOrientation="horizontal" cdkDropList #sender="cdkDropList"
class="example-list" (cdkDropListDropped)="drop($event)" [cdkDropListConnectedTo]="[receiver]" fxLayout="row"
fxLayoutAlign="center center" fxLayoutGap="10px">
<div class="example-box" *ngFor="let singleSender of senderSrc" cdkDrag>
<img class="img-images-send" [src]="singleSender">
</div>
</div>
</div>
2 つのドロップ リストがあります:受信者と送信者。
リスト内には画像があり、画像を送信者リストから受信者リストに移動できます(逆ではありません)。
メソッドの typescript ソース コードdrop
:
drop(event: CdkDragDrop<string[]>) {
console.log('Event: ', event);
if (event.container.id === 'receiver-container' && event.previousContainer.id !== 'receiver-container') {
if (event.currentIndex < this.receiverSrc.length) {
//move item
console.log('movement allowed');
this.receiverSrc[event.currentIndex] = this.sanitizer.bypassSecurityTrustUrl(event.item.element.nativeElement.childNodes[0].src);
console.log(event.item.element);
this.senderSrc[event.previousIndex] = this.imagePlaceholder;
}
}
}
img
ホバーをドラッグするreceiver cdkDropList
と、レシーバーのアイテムは、現在ドラッグしているアイテムの位置に応じてシフトされます (これは、Angular Material ドラッグ アンド ドロップの「リスト間でのアイテムの転送」の標準的な動作です)。
私が必要としているのは、レシーバー dropList (rerange) 内のアイテムのシフト/移動動作を無効にすることです。
or で動きを無効にしようとしましたCSS
が、何も機能していません。transform: translate3d(0px, 0px, 0px)
transform:none