安装：

npm install --save vue-draggable-resizable

main.js

import { createApp } from 'vue'
import App from './App.vue'
import VueDraggableResizable from 'vue-draggable-resizable/src/components/vue-draggable-resizable.vue'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
const app = createApp(App);
app.component('vue-draggable-resizable', VueDraggableResizable)
app.mount("#app");

使用：

<template>
  <vue-draggable-resizable
    :w="w"
    :h="h"
    :x="x"
    :y="y"
    :title="title"
    class="popup"
    :parent="true"
    drag-handle=".heigh"
    :draggable="drag"
    drag-cancel=".close_drag"
    :is-conflict-check="true"
    :resizable="false"
  >
   <<vue-draggable-resizable/>

事件：

@dragging="onDrag"  //拖动组件时。
@resizing="onResize" //组件调整大小时
@dragstop="onDragstop" //组件停止拖动时
@resizestop="onResizstop" //组件停止调整大小
@deactivated="onDeactivated" //单击组件外的任何位置
@activated="onActivated" //单击组件时

其他配置：

:w="50" 默认宽度
:h="50" 默认高度
:x="50" 默认水平坐标 注意相对元素是谁
:y="50" 默认垂直最表 注意相对元素是谁
:min-width="50" 最小宽度
:min-height="50" 最小高度
:parent="true" 限制不能拖出父元素
parent=".p-event" 限制不能拖出class为p-event的元素
:grid 水平和垂直移动 每次分别能够走多少像素
class-name 自定义组件class 下面定义一个dragging1