这几天实习公司需要用到可拖拽的还需要根据值自动去切换位置的也就是双向绑定吧用这个可能会好一些
Vue3DraggableResizable

1. 安装

npm install vue3-draggable-resizable

2. 引入

可以全局或者局部引入：全局：main.js 文件配置

import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
createApp(App).use(Vue3DraggableResizable)

局部：引入后，再在 components 中声明一下组件即可

3. 使用

使用 Vue3DraggableResizable 组件标签，并配置相关属性

initW —— 初始宽度（单位为px）
initH ——初始高度
x、y、w、h —— 坐标及宽高值
parent —— 组件是否限制在父节点内（默认为false，不限制）
draggable —— 是否可拖动
resizable —— 是否可调整大小
@drag-start —— 拖动组件事件
@resize-start —— 调整组件大小时触发
...

<Vue3DraggableResizable
    :initW="110"
    :initH="80"
    v-model:x="x"
    v-model:y="y"
    v-model:w="w"
    v-model:h="h"
    v-model:active="active"
    :parent="true"
    :draggable="true"
    :resizable="true"
    @drag-start="start"
    @resize-start="start"
    @drag-end="end"
    @resize-end="end"
>
  <p>测试文字</p>
</Vue3DraggableResizable>

GitHub