无法禁用点击拖放

时间:2018-06-19 14:58:23

标签: javascript angular drag-and-drop angular-directive hammer.js

这是我的指令的一部分,用于在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;
      }
    }

  }

0 个答案:

没有答案