如何在Vue中实现拖拽功能？

在Vue中实现拖拽功能，可以使用原生JavaScript结合Vue的事件监听和数据绑定来完成。以下是一个简单的例子：

<template>
  <div>
    <div
      class="draggable"
      :style="{ top: draggableTop + 'px', left: draggableLeft + 'px' }"
      @mousedown="startDrag"
      @touchstart="startDrag"
    >
      拖动我
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      draggableTop: 0,
      draggableLeft: 0,
      dragging: false
    };
  },
  methods: {
    startDrag(event) {
      event.preventDefault();
      this.dragging = true;
      document.addEventListener('mousemove', this.moveDrag);
      document.addEventListener('touchmove', this.moveDrag);
      document.addEventListener('mouseup', this.stopDrag);
      document.addEventListener('touchend', this.stopDrag);
    },
    moveDrag(event) {
      if (this.dragging) {
        const clientX = event.touches ? event.touches[0].clientX : event.clientX;
        const clientY = event.touches ? event.touches[0].clientY : event.clientY;
        this.draggableLeft = clientX - this.$el.offsetLeft;
        this.draggableTop = clientY - this.$el.offsetTop;
      }
    },
    stopDrag() {
      this.dragging = false;
      document.removeEventListener('mousemove', this.moveDrag);
      document.removeEventListener('touchmove', this.moveDrag);
      document.removeEventListener('mouseup', this.stopDrag);
      document.removeEventListener('touchend', this.stopDrag);
    }
  }
};
</script>
 
<style>
.draggable {
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 100px;
}
</style>

在这个例子中，.draggable 元素可以通过鼠标或触摸事件被拖动。startDrag 方法在拖动开始时被调用，它设置一个标志 dragging 为 true，并开始监听 mousemove 和 touchmove 事件。moveDrag 方法在拖动过程中被调用，它计算元素的新位置并更新 draggableTop 和 draggableLeft 数据绑定的值。stopDrag 方法在拖动结束时被调用，它清除事件监听器并设置 dragging 为 false。