Отменить перетаскивание при нажатии клавиши Angular cdk Перетаскивание

Тоже долго сталкивался с этой проблемой. Наконец, я мог исправить это, отправив событие 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
    }
}

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

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

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

Лучший способ сделать это - вызвать event.source._dragRef.reset(); (как @AleRubis упоминается в комментарии) при нажатии клавиши ESC. Теперь вопрос в том, откуда вы можете получить этот _dragRef вне событий cdkDrag (ESC ключевое событие), вы можете сохранить его в такой переменной компонента, когда начнется перетаскивание.

Составная часть:

cdkDragStarted = (event) => { this.dragRef = event.source._dragRef; }

Шаблон:

<p cdkDrag (cdkDragStarted)="cdkDragStarted($event)"> Draggable paragraph </p>

Вот версия с использованием rxjs. Требуется ссылка на CdkDrag как на ViewChild. К сожалению, поскольку не существует общедоступного метода прекращения перетаскивания DragRef, вы должны использовать dispatchEvent как единственный способ завершить процесс перетаскивания.

В приведенном ниже примере есть две части. Что происходит, так это то, что событие завершено можно прослушивать только после начала, и этот экземпляр прослушивания может быть остановлен субъектом, инициированным нажатием клавиши escape.

• В AfterViewInit создается подписка на запущенный EventEmitter из директивы CdkDrag.
• После события запуска поток, который переключается на прослушивание , закончился.
• Если запрос отмены запущен, поток будет завершен оператором takeUntil, и reset() будет вызываться в директиве для сброса позиции, а dispatchEvent() будет использоваться для остановки процесса перетаскивания.
• В противном случае после запуска конечного события из OP вызывается метод onDragEnded().
• Если не происходит чего-то действительно забавного, событие завершено будет запускаться не более одного раза за запуск, поэтому нет необходимости в дополнительном take(1).

private dragCancelRequest = new Subject();

ngAfterViewInit() {
  this.drag.started.pipe(
    switchMap(({ source }) => source.ended.pipe(
      takeUntil(this.dragCancelRequest.pipe(tap(() => {
        source.reset();
        document.dispatchEvent(new Event('mouseup'));
      })))
    )),
    tap(x => this.onDragEnded(x))
  ).subscribe();
}

@HostListener('window:keyup', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
  if (event.key === 'Escape') {
    this.dragCancelRequest.next();
  }
}

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

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