代码之家 › 专栏 › 技术社区 › Miguel Frias

取消按键拖动角度cdk拖放

angular-cdk angular-material angular javascript

Miguel Frias · 技术社区 · 6 年前

我在一个应用程序中工作,实现了从角度材质CDK的新拖放,我试图取消元素按下的拖动事件 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>

onDragEnded(event: CdkDragEnd) {
  console.log(event)
  event.source.element.nativeElement.style.transform = 'none';
  const source: any = event.source;
  source._passiveTransform = { x: 0, y: 0 };
}

但到目前为止还没有成功。

3 回复 | 直到 6 年前

danizep 6 年前

我也长期面临这个问题。最后,我可以通过发送一个 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
    }
}

希望这能帮助你……:)

Alessio Pragliola - Creact 6 年前

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

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

Ubaid Ur Rehman 5 年前

最好的办法是打电话 event.source._dragRef.reset(); ESC 按键。现在的问题是,在cdkDrag事件之外,从何处可以获得dragRef( 电子稳定控制系统

组成部分:

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

模板:

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

Daniel Gimenez 4 年前

这里有一个使用rxjs的版本。它需要引用 CdkDrag 作为孩子。不幸的是,因为没有公共方法来停止在 DragRef 你必须使用 dispatchEvent

结束了 事件只能在启动后收听,而该收听实例可以由按escape触发的主题停止。

在AfterViewInit中,将创建对起动来自 CdkDrag 指令。
结束了 .
如果触发取消请求,则流将由 takeUntil reset() dispatchEvent() 将用于停止拖动过程。
否则,一旦触发结束事件,则 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();
  }
}

-2

R. Viral 6 年前

你可以使用像。。。

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