vue 可拖动的DIV

Vue 可以通过绑定事件的方式来实现可拖动的 DIV。具体实现方式如下：

<template>
  <div>
    <div 
      class="drag-box" 
      draggable="true" 
      @dragstart="dragStart"
      @dragend="dragEnd"
      :style="{top: position.top + 'px', left: position.left + 'px'}"
    >
      可拖动的 DIV
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: {
        x: 0,
        y: 0,
        top: 0,
        left: 0,
        dragging: false
      }
    }
  },
  methods: {
    dragStart(event) {
      // 获取鼠标在元素内的偏移量
      const offsetX = event.clientX - event.target.offsetLeft;
      const offsetY = event.clientY - event.target.offsetTop;
      this.position.x = offsetX;
      this.position.y = offsetY;
      this.position.dragging = true;
    },
    dragEnd(event) {
      this.position.dragging = false;
    }
  },
  mounted() {
    // 监听鼠标移动事件
    document.addEventListener('mousemove', this.handleMouseMove);
  },
  beforeDestroy() {
    // 移除鼠标移动事件监听
    document.removeEventListener('mousemove', this.handleMouseMove);
  },
  methods: {
    handleMouseMove(event) {
      if (this.position.dragging) {
        // 计算拖动后的位置
        this.position.left = event.clientX - this.position.x;
        this.position.top = event.clientY - this.position.y;
      }
    }
  }
}
</script>

<style>
.drag-box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 100px;
}
</style>

上面的代码中，我们创建了一个可拖动的 DIV，它的 `draggable` 属性被设置为 `true`。在 `dragstart` 事件中，我们获取了鼠标在元素内的偏移量，并将其保存到 `position` 对象中。在 `dragend` 事件中，我们将 `dragging` 属性设置为 `false`。

在 `mounted` 钩子函数中，我们监听了鼠标移动事件，并在 `beforeDestroy` 钩子函数中移除了事件监听。在 `handleMouseMove` 方法中，我们计算了拖动后的位置，并将其保存到 `position` 对象中。在模板中，我们使用 `:style` 绑定了位置信息，使得元素可以随鼠标拖动而移动。