Vue обработчики событий перетаскивания не запускаются - PullRequest
Новая
       105

Vue обработчики событий перетаскивания не запускаются

0 голосов
/ 07 августа 2020

Я пытаюсь следовать этой статье, чтобы заставить элемент перемещаться в любом месте экрана, перетаскивая его: https://www.kirupa.com/html5/drag.htm Дело в том, что статья находится в обычном JavaScript и я ' m, используя Vue, поэтому способ обработки обработчиков событий немного отличается. По какой-то причине @dragStart и @drag вообще не срабатывают, но @dragEnd срабатывает, когда пользователь перестает перетаскивать элемент.

Только div, который я использую для этого 

<div class="pip" draggable="true" @dragStart="dragStart" @drag="drag" @dragend="dragEnd">

Тег скрипта 

data() {
    return {
      active: false,
      currentX: null,
      currentY: null,
      initialX: null,
      initialY: null,
      xOffset: 0,
      yOffset: 0,
    };
  },
  methods: {
    dragStart(event) {
      console.log('start');
      const dragItem = document.querySelector('.pip');
      if (event.type === 'touchstart') {
        this.initialX = event.touches[0].clientX - this.xOffset;
        this.initialY = event.touches[0].clientY - this.yOffset;
      } else {
        this.initialX = event.clientX - this.xOffset;
        this.initialY = event.clientY - this.yOffset;
      }

      if (event.target === dragItem) {
        this.active = true;
      }
    },
    drag(event) {
      console.log('drag');
      const dragItem = document.querySelector('.pip');
      if (this.active) {
        event.preventDefault();

        if (event.type === 'touchmove') {
          this.currentX = event.touches[0].clientX - this.initialX;
          this.currentY = event.touches[0].clientY - this.initialY;
        } else {
          this.currentX = event.clientX - this.initialX;
          this.currentY = event.clientY - this.initialY;
        }

        this.xOffset = this.currentX;
        this.yOffset = this.currentY;

        this.setTranslate(this.currentX, this.currentY, dragItem);
      }
    },
    dragEnd() {
      console.log('end');
      this.initialX = this.currentX;
      this.initialY = this.currentY;
      this.active = false;
      // event.target.style.bottom = '0px';
      // event.target.style.top = `${event.clientY - event.target.offsetHeight / 2}px`;
      // event.target.style.left = `${event.clientX - event.target.offsetWidth / 2}px`;
      // console.log(event);
    },
    setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(' + xPos + 'px, ' + yPos + 'px, 0)";
    },
...