Отмена перетаскивания по нажатию клавиши Angular cdk Drag and Drop

Question

Я работаю в приложении, реализующем новое перетаскивание из углового материала 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 };
}

, но безуспешнодалеко.

Answer 1

Вы можете переместить перетаскиваемый объект в позицию, используя:

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

Answer 2

Я тоже давно сталкивался с этой проблемой.Наконец, я мог бы исправить это, отправив событие mouseup, которое будет действовать как пользователь, отпустивший мышь.

@HostListener('window:keyup', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
    if (event.key === 'Escape') {
        document.dispatchEvent(new Event('mouseup'));
    }
}

Это чрезвычайно хакерское решение, имеющее недостатки.На самом деле, вы не отменяете перетаскивание, а просто отбрасываете.Это означает, что если вы наведите курсор cdkDropList или один из них активен, он запустит эмиттер 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
    }
}

Надеюсь, это поможет вам ...:)

Answer 3

Вы можете использовать что-то вроде ...

@HostListener('window:keyup', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
    if (event.code === 'Escape') {
        // call dragend event
    }
}