事件传播cdk拖动
事件传播cdk拖动
提问于 2019-08-15 18:37:36
当我在input中拖曳时，我如何防止拖拽。我只想让pink-meat扮演drag-handle的角色。
html
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let movie of movies" cdkDrag>
<input [placeholder]="movie" (click)="stopIt($event)" (mousemove)="stopIt($event)">
</div>
</div>js
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}
stopIt(e) {
e.stopPropagation();
}到目前为止，它还不起作用。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-08-15 18:51:40
Stack Overflow用户
发布于 2019-08-15 19:27:38
我最后使用了一个指令和cdkDropListDisabled，因为我有一堆应该stop dragging的元素。
js
import {Directive, HostListener} from "@angular/core";
@Directive({
selector: "[stopDragging]"
})
export class StopDragging
{
@Input() stopDragging: {bool: boolean};
@HostListener('mouseenter', ['$event'])
public disable(event: any): void
{
debugger;
this.stopDragging.bool = true
}
@HostListener('mouseleave', ['$event'])
public enable(event: any): void
{
debugger;
this.stopDragging.bool = false;
}
}模板
<ELEMENT ... [cdkDropListDisabled]="dragListDisabled.bool">
<input [stopDragging]="dragListDisabled">
...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57514531
复制相关文章
相似问题
腾讯云开发者
