Record once to realize the function of dragging and zooming components

1. Install first

npm i vue3-draggable-resizable --save

2. Global import in main.js

import Vue3DraggableResizable from "vue3-draggable-resizable";

import "vue3-draggable-resizable/dist/vue3DraggableResizable.css";

3. If you need to use it locally, import the style file separately in the component

import Vue3DraggableResizable from "vue3-draggable-resizable";

import "vue3-draggable-resizable/dist/Vue3DraggableResizable.css";

4. Use (events that may be used to implement zooming and dragging)

@activated="print('Active')"      

@deactivated="print('Stop')"      

@drag-start="print('drag start')"      

@resize-start="print('Start resizing')"      

@dragging="print('dragging')"      

@resizing="print('resizing')"      

@drag-end="print('drag end')"      

@resize-end="print('resize end')"

5. Specific applications on the page

 <Vue3DraggableResizable    

:draggable="store.state.draggable.isDraggable" //Control whether it can be dragged and written in the store

:x="draggableData.clientX" //These parameters are obtained from the database

:y="draggableData.clientY"    

:initH="draggableData.initHeight"    

:initW="draggableData.initWidth"    

:w="draggableData.initWidth"    

:h="draggableData.initHeight"    

@resize-end="resizeEndHandle"    

@drag-end="dragEndHandler"    

v-show="alarmInfos.length > 0"   >

        Any element can be placed inside

</Vue3DraggableResizable>