我有类似的代码:
hmtl
<div
cdkDropList
id="{{executor.id}}-{{i}}"
[cdkDropListData]="date.tasks"
(cdkDropListDropped)="drop($event, date.date, executor)"
[cdkDropListConnectedTo]="allDropLists"
class="dropListDate">
<div
*ngFor="let item of date.tasks"
class="drag-me"
cdkDrag
(cdkDragEntered)="enterListContainer($event)"
[cdkDragData]="item"
resizable>
<app-plan-task [task]="item" [list]="true" cdkDragHandle></app-plan-task>
<div class="resize-drag-task"
grabber></div>
</div>
</div>
可调整大小的指令
_host: HTMLElement;
_startWidth = 0;
constructor(private elm: ElementRef) { }
ngOnInit() {
this._host = this.elm.nativeElement;
}
dragStart() {
console.log('START')
const style = window.getComputedStyle(this._host, undefined);
this._startWidth = style.width ? parseInt(style.width, 10) : 0;
}
dragging(diff: number) {
this._host.style.width = this._startWidth + diff + 'px';
}
dragEnd() {
console.log('END')
this._startWidth = 0;
}
抓取指令
@HostListener('mousedown', ['$event'])
mousedown = (e: MouseEvent) => {
this._startOffsetX = e.clientX;
document.addEventListener('mousemove', this._boundDragging);
document.addEventListener('mouseup', this._boundDragEnd);
this.resizable.dragStart();
}
_startOffsetX = 0;
readonly _boundDragging = (e) => this._dragging(e);
readonly _boundDragEnd = (e) => this._dragEnd(e);
constructor(
private elm: ElementRef,
@Host() @SkipSelf() private resizable: ResizableDirective,
) { }
private _dragging(e: MouseEvent) {
const diff = e.clientX - this._startOffsetX;
this.resizable.dragging(diff);
}
private _dragEnd(e: MouseEvent) {
this._startOffsetX = 0;
document.removeEventListener('mousemove', this._boundDragging);
document.removeEventListener('mouseup', this._boundDragEnd);
this.resizable.dragEnd();
}
您可以看到我有多个带有垂直dnd的“表”,现在我需要调整'em的每个项目的大小,如果已调整大小,则必须将其复制到新数组中并获取其索引。但是实际上,当我单击“抓取器”时,我无法处理DragEvent,因为它没有cdkDragHandle。因此,我如何以编程方式将该事件设置为不希望拖动的事件,而只是开始/移动/结束事件以获取调整大小后的元素的位置。
它可能看起来像: https://cdn1.savepice.ru/uploads/2019/2/8/0426296ca859446d6a92f569bca34826-full.png