How to use mouse events in vue to move boxes on the page

In Vue, you can move boxes on the page by binding events. Commonly used events include:

• @mousemove: Fired when the mouse pointer moves inside the element.
• @mousedown: Fired when the mouse button is pressed.
• @mouseup: Fired when the mouse button is released.
• Related code html code

• <div id="app">
    <div id="box"
         @mousedown="startDrag"
         @mousemove="dragging"
         @mouseup="stopDrag"
         :style="{ top: top + 'px', left: left + 'px' }">
    </div>
  </div>
  

  css code

• #box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
  }
  

  js related code

• new Vue({
    data: {
      isDragging: false,
      lastX: 0,
      lastY: 0,
      left: 50,
      top: 50
    },
    methods: {
      startDrag(e) {
        this.isDragging = true;
        this.lastX = e.clientX;
        this.lastY = e.clientY;
      },
      dragging(e) {
        if (this.isDragging) {
          let deltaX = e.clientX - this.lastX;
          let deltaY = e.clientY - this.lastY;
          this.left += deltaX;
          this.top += deltaY;
          this.lastX = e.clientX;
          this.lastY = e.clientY;
        }
      },
      stopDrag() {
        this.isDragging = false;
      }
    }
  })