近用Vue3写了个用于拖拽调整地位和大小的的组件，同时反对冲突检测，元素吸附对齐，实时参考线等个性。

首先git地址 ： Vue3DraggableResizable

个性

    • 反对拖拽和缩放，可别离定义开启或敞开**
    • 自定义缩放句柄（缩放时共有八个方位可操作，可别离定义开启或敞开）**
    • 限度组件的拖动和缩放在其父节点内**
    • 自定义组件内各种类名**
    • 缩放句柄的类名也可自定义**
    • 元素吸附对齐**
    • 实时参考线**
    • 自定义参考线**
    • 应用 Vue3 和 ts**

    该组件有几十种参数和事件，可进行各种配置，具体可查看Github的具体文档，这里只说一下简略的应用形式和个性。

    <template>  <div id="app">    <div class="parent">      <DraggableContainer>        <Vue3DraggableResizable>          Test        </Vue3DraggableResizable>        <Vue3DraggableResizable>          Another test        </Vue3DraggableResizable>      </DraggableContainer>    </div>  </div></template><script>import { defineComponent } from 'vue'import { DraggableContainer },Vue3DraggableResizable  from 'vue3-draggable-resizable'//引入默认款式import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'export default defineComponent({  components: { Vue3DraggableResizable, DraggableContainer }})</script><style>.parent {  width: 200px;  height: 200px;  position: absolute;  top: 100px;  left: 100px;  border: 1px solid #000;  user-select: none;}</style>

    如上方，简略的引入组件即可，需注意，默认导出的Vue3DraggableResizable组件就是拖拽缩放组件，可独自应用也可和DraggableContainer联合应用，DraggableContainer是另一个容器组件，该组件提供了主动吸附以及参考线等个性的反对，如果你不须要主动吸附的话，间接独自应用Vue3DraggableResizable组件即可，具体props和events可查看git文档。

    如果该组件对你有用的话，在 git上帮我点个star 是最好的了，如果你在应用过程中有什么问题的话，也欢送在issues上发问，我会尽快恢复或解决的。