title: Vue drag event handlers not firing
body: <p>I'm trying to follow along with this article to make an item move anywhere on the screen by dragging it: <a href="https://www.kirupa.com/html5/drag.htm" rel="nofollow noreferrer">https://www.kirupa.com/html5/drag.htm</a> The thing is that the article is in regular JavaScript and I'm using Vue so the way event handlers get handled are slightly different. For some reason, @dragStart and @drag don't fire at all but @dragEnd does fire when the user stops dragging the item.</p>
  <p><strong>Only div that I'm using for this</strong></p>
  <pre><code>&lt;div class=&quot;pip&quot; draggable=&quot;true&quot; @dragStart=&quot;dragStart&quot; @drag=&quot;drag&quot; @dragend=&quot;dragEnd&quot;&gt;
  </code></pre>
  <p><strong>Script tag</strong></p>
  <pre><code>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 = &quot;translate3d(' + xPos + 'px, ' + yPos + 'px, 0)&quot;;
      },
  </code></pre>