vue实现div拖拽

首先，你需要在Vue组件中添加一个div元素，并设置它的样式为可拖拽：

然后，在Vue组件的methods中添加以下方法：

data() {
  return {
    dragging: false,
    x: 0,
    y: 0,
    startX: 0,
    startY: 0
  };
},
methods: {
  startDrag(event) {
    this.dragging = true;
    this.startX = event.clientX - this.x;
    this.startY = event.clientY - this.y;
  },
  stopDrag() {
    this.dragging = false;
  },
  drag(event) {
    if (this.dragging) {
      this.x = event.clientX - this.startX;
      this.y = event.clientY - this.startY;
    }
  }
}

最后，在CSS中添加以下样式

.draggable {
  position: absolute;
  left: 0;
  top: 0;
  cursor: move;
}

移动端：

对于移动端，需要使用触摸事件来实现拖拽功能。以下是在Vue 3中使用触摸事件实现移动端拖拽的代码示例：

在移动端，我们使用@touchstart、@touchend和@touchmove事件监听器来代替桌面端的鼠标事件。在startDrag和drag方法中，我们使用event.touches[0].clientX和event.touches[0].clientY来获取触摸点的位置。

这样，你就可以在Vue 3中实现移动端的div拖拽功能了。