这是我的指令的一部分,用于在DOM上拖放按钮,但是当我使用此指令拖放项目时,将调用click事件,并且我无法通过阻止默认值或其他方式阻止它,我想我想念一些东西...
ngAfterViewInit(): void {
this.renderer.setElementStyle(
this.element.nativeElement,
'position',
'absolute'
);
this.renderer.setElementStyle(
this.element.nativeElement,
'left',
this.startLeft + 'px'
);
this.renderer.setElementStyle(
this.element.nativeElement,
'top',
this.startTop + 'px'
);
const hammer = new window['Hammer'](this.element.nativeElement);
hammer.get('pan').set({ direction: window['Hammer'].DIRECTION_ALL });
hammer.on('pan', ev => {
this.handlePan(ev);
});
}
handlePan(ev): void {
console.log('pan');
if (this.draggable) {
const elem = ev.target;
this.panning = true;
if (!this.isDragging) {
this.isDragging = true;
this.startLeft = elem.offsetLeft;
this.startTop = elem.offsetTop;
}
const moveX = ev.deltaX + this.startLeft;
const moveY = ev.deltaY + this.startTop;
const newLeft = (moveX + elem.offsetWidth < this.imageRight) ? ((moveX > this.imageLeft) ? moveX : this.imageLeft) : this.imageRight - elem.offsetWidth;
const newTop = (moveY + elem.offsetHeight < this.imageBottom) ? ((moveY > this.imageTop) ? moveY : this.imageTop) : this.imageBottom - elem.offsetHeight;
elem.style.left = newLeft + 'px';
elem.style.top = newTop + 'px';
if (ev.isFinal) {
this.isDragging = false;
}
}
}