web-dev-qa-db-ja.com

キーを押したときにドラッグをキャンセルAngular cdkドラッグアンドドロップ

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 };
}

しかし、これまでのところ成功はありません。

javascriptangularangular-materialangular-cdk
8
Miguel Angel Frias

私も長い間この問題に直面していました。最後に、マウスを離すユーザーとして機能する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
    }
}

これがお役に立てば幸いです... :)

4
danizep

ドラッグしたアイテムは、次を使用して特定の位置に移動できます。

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};
2
Alessio Pragliola - Creact

これを行う最良の方法は、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>

0
Ubaid Ur Rehman