Grabe una vez para realizar la función de arrastrar y hacer zoom en los componentes.

1. Instalar primero

npm i vue3-arrastrable-redimensionable --save

2. Importación global en main.js

importar Vue3DraggableResizable desde "vue3-draggable-resizable";

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

3. Si necesita usarlo localmente, importe el archivo de estilo por separado en el componente.

importar Vue3DraggableResizable desde "vue3-draggable-resizable";

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

4. Uso (eventos que pueden usarse para implementar el zoom y el arrastre)

@activado="imprimir('Activo')"      

@deactivated="imprimir('detener')"      

@drag-start="imprimir('arrastrar inicio')"      

@resize-start="print('Comenzar a cambiar el tamaño')"      

@dragging="imprimir('arrastrando')"      

@resizing="imprimir('cambiar tamaño')"      

@drag-end="imprimir('arrastrar extremo')"      

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

5. Aplicaciones específicas en la página

 <Vue3DraggableResizable    

:draggable="store.state.draggable.isDraggable" //Controla si se puede arrastrar y escribir en la tienda

:x="draggableData.clientX" //Estos parámetros se obtienen de la base de datos

:y="draggableData.clienteY"    

:initH="draggableData.initHeight"    

:initW="draggableData.initWidth"    

:w="draggableData.initWidth"    

:h="draggableData.initHeight"    

@resize-end="resizeEndHandle"    

@drag-end="dragEndHandler"    

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

        Cualquier elemento se puede colocar en el interior.

</Vue3DraggableResizable>