取消拖动键按角度cdk拖放

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

最好的方法是调用事件。来源_德拉格雷夫。重置（） ESC键时编码>（注释中提到@AleRubis）。现在的问题是，在cdkDrag事件（ESCkey event）之外，从何处可以获得dragRef，当拖动开始时，可以将其保存在这样的组件变量中。

组件：

cdkDragStarted=（事件）=

模板：

Answer 2

可以使用以下命令将拖动的项目移动到某个位置：

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 3

我也面对这个问题很久了。最后，我可以通过发送一个mouseup事件来修复它，该事件将充当用户释放鼠标的角色。

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

这是一个非常笨拙的解决方案，并伴随着它的缺点。事实上，您不是取消拖动，而是删除。这意味着，如果您悬停在一个cdkDropList上，或者其中一个处于活动状态，它将触发该列表的cdkDropList下降发射器。您可以通过添加标志轻松解决这个问题。

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

希望这能帮助你……：）