vue3拖拽组件 vue3-draggable-resizable 支持 参考线，吸附对齐

组件Git地址

具体组件属性跳转组件git查看

第一步、安装 vue3-draggable-resizable

执行

npm install vue3-draggable-resizable

第二步、注册—可以全局注册也可以模块

首先全局引入

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

createApp(App)
  .use(Vue3DraggableResizable)
  .mount('#app')

模块引入

// draggableResizable.js
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

export default defineComponent({
  components: { Vue3DraggableResizable }
})

第三步、使用 vue3-draggable-resizable

<template>
  <div id="app">
    <div class="parent">
    <!-- 加上DraggableContainer以后就会自动启用 参考线，吸附对齐功能。如果是组件拖拽，循环写在 Vue3DraggableResizable 中 -->
      <DraggableContainer>
	      <Vue3DraggableResizable
	        :initW="110"
	        :initH="120"
	        v-model:x="x"
	        v-model:y="y"
	        v-model:w="w"
	        v-model:h="h"
	        v-model:active="active"
	        :draggable="true"
	        :resizable="true"
	        @activated="print('activated')"
	        @deactivated="print('deactivated')"
	        @drag-start="print('drag-start')"
	        @resize-start="print('resize-start')"
	        @dragging="print('dragging')"
	        @resizing="print('resizing')"
	        @drag-end="print('drag-end')"
	        @resize-end="print('resize-end')"
	      >
	        This is a test example
	      </Vue3DraggableResizable>
      </DraggableContainer>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import {DraggableContainer} from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

const x = ref(100)
const y = ref(100)
const h = ref(100)
const w = ref(100)
const active = ref(false) // 控制组件是否是激活状态

const print = (val) => {
      console.log(val)
}
</script>
<style>
.parent {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid #000;
  user-select: none;
}
</style>