不使用自定义指令和v-drag 用vue3写一个div拖拽功能

好的，对于这个问题，我可以给您一个简单明了的解决方案。

首先，在你的 template 中，你需要创建一个可拖拽元素的 div 元素，如下所示：

<template>
  <div class="drag-element"
       ref="dragBox"
       v-on:mousedown="dragStart"
       v-on:mousemove="drag"
       v-on:mouseup="dragEnd"
  >
    可拖拽的元素
  </div>
</template>

在这里，我们创建了一个拥有 `drag-element` 类名的 div 元素，并将其加入了 `ref` 属性从而获得其引用。接下来，我们需要为其绑定 mousedown、mousemove 和 mouseup 事件，从而实现拖拽功能。这里我们分别定义了 `dragStart`、`drag` 和 `dragEnd` 三个方法来分别监听这三个事件。具体的实现如下：

<script>
import {ref, computed} from 'vue'

export default {
  name: 'DraggableDiv',
  setup(props) {
    const dragBox = ref(null);
    const position = ref({x: 0, y: 0});
    const isDragged = ref(false);

    const dragStart = (event) => {
      event.preventDefault();
      isDragged.value = true;
      position.value = {
        x: event.clientX - dragBox.value.getBoundingClientRect().left,
        y: event.clientY - dragBox.value.getBoundingClientRect().top,
      };
    };

    const drag = (event) => {
      event.preventDefault();
      if (isDragged.value) {
        dragBox.value.style.left = event.clientX - position.value.x + 'px';
        dragBox.value.style.top = event.clientY - position.value.y + 'px';
      }
    };

    const dragEnd = () => {
      isDragged.value = false;
    };

    return {
      dragBox,
      position,
      isDragged,

      dragStart,
      drag,
      dragEnd,
    };
  },
};
</script>

在这里，我们使用了 Vue 3 的 Composition API 以及 ref 和 computed 两个函数。我们创建了三个 ref 变量：`dragBox`、`position` 和 `isDragged`。其中，`dragBox` 引用了之前创建的用于拖放的 div 元素，而 `position` 保存了该元素当前的位置信息，`isDragged` 用于记录元素是否正在被拖拽。

我们还定义了三个方法：`dragStart`、`drag` 和 `dragEnd` 分别对应了 mousedown、mousemove 和 mouseup 事件。其中，`dragStart` 方法会在鼠标按下时将 `isDragged` 标记为 true，并计算出当前鼠标位置和元素左上角的位置之间的偏移量。`drag` 方法则根据当前鼠标位置和偏移量计算出元素应该处于的位置，并实现元素的平移。`dragEnd` 方法则在鼠标松开时将 `isDragged` 标记为 false 以结束拖拽。

最后，需要注意的是，为了让拖拽效果更加流畅，你可能还需要在 `drag-element` 类中添加如下 CSS 样式：

.drag-element {
  position: absolute;
  left: 0px;
  top: 0px;
  cursor: move;
}

这样，你就可以创建一个简单的可拖拽元素了。希望这能够对你有所帮助！