angularマテリアルCDKからの新しいドラッグアンドドロップを実装するアプリケーションで作業しており、Esc
を押す要素のドラッグイベントをキャンセルしようとしています。つまり、要素のドラッグを開始しますが、要素のドラッグ中にEsc
を押すと、ドラッグを開始した位置に戻るはずです。これまでのところ、これを行う方法は見つかりませんでした。誰かが私がこれを行う方法を知っていますか?これについてのcdkドキュメントには何もありません。私はこのようなことをしようとします。
テンプレート
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let movie of movies" (cdkDragEnded)="onDragEnded($event)" cdkDrag>{{movie}}</div>
</div>
Tsコンポーネント
onDragEnded(event: CdkDragEnd) {
console.log(event)
event.source.element.nativeElement.style.transform = 'none';
const source: any = event.source;
source._passiveTransform = { x: 0, y: 0 };
}
しかし、これまでのところ成功はありません。
私も長い間この問題に直面していました。最後に、マウスを離すユーザーとして機能するmouseup
イベントをディスパッチすることで修正できます。
@HostListener('window:keyup', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.key === 'Escape') {
document.dispatchEvent(new Event('mouseup'));
}
}
これは非常にハッキーなソリューションであり、欠点があります。実際、ドラッグをキャンセルするのではなく、ドロップします。つまり、cdkDropList
にカーソルを合わせるか、1つがアクティブな場合、そのリストのcdkDropListDropped
エミターがトリガーされます。フラグを追加することで簡単に回避できるもの。
private _canceledByEsq = false;
@HostListener('window:keyup', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
if (event.key === 'Escape') {
this._canceledByEsq = true;
document.dispatchEvent(new Event('mouseup'));
}
}
handleDrop() {
if (!this._canceledByEsq) {
// Do my data manipulations
}
}
これがお役に立てば幸いです... :)
ドラッグしたアイテムは、次を使用して特定の位置に移動できます。
event['source']['element']['nativeElement']['style']['transform'] = 'translate3d(0,0,0)';
event['source']['_dragRef']['_activeTransform'] = {x: 0, y: 0};
event['source']['_dragRef']['_passiveTransform'] = {x: 0, y: 0};
これを行う最良の方法は、ESC
キーを押したときにevent.source._dragRef.reset();
(@ AleRubisがコメントで言及したように)を呼び出すことです。ここで問題となるのは、cdkDragイベント(ESC
keyイベント)の外部でその_dragRefを取得できる場所です。ドラッグの開始時に、このようなコンポーネント変数に保存できます。
成分:
cdkDragStarted = (event) => { this.dragRef = event.source._dragRef; }
テンプレート:
<p cdkDrag (cdkDragStarted)="cdkDragStarted($event)"> Draggable paragraph </p>