vue3 drag and drop plug-in Vue3DraggableResizable

Official documentation of the Vue3DraggableResizable drag-and-drop plug-in

1. Properties and events of Vue3DraggableResizable

1. Property configuration of Vue3DraggableResizable

td>

Attributes	Type	Default value	Function description	Example
initW	Number	null	Set initial width (px)
initH	Number	null	Set initial height (px)
w	Number	0	The current width (px) of the component, you can use the “v-model:w” syntax to make it consistent with the parent component
h	Number	0	component The current height (px), you can use the “v-model:h” syntax to make it consistent with the parent component
x	Number	0	The distance (px) between the component and the left side of the parent container. You can use “v -model:x” syntax makes it consistent with the parent component
y
y	Number	0	The distance (px) between the component and the right side of the parent container. You can use the “v-model:y” syntax to make it the same as the parent component Be consistent
minW	Number	20	The minimum width of the component (px)
minH	Number	20	Minimum height of component (px)
active	Boolean	false	Whether the component is currently active, you can use “v-model:active ” syntax makes it consistent with the parent component
draggable	Boolean	true	Whether the component can be dragged
resizable	Boolean	true	Whether the component is resizable
lockAspectRatio	Boolean	false	This property is used to set whether to lock the ratio
disabledX	Boolean	false	Whether to prohibit the component from moving on the X axis
disabledY	Boolean	false	Whether to prohibit the component from moving on the Y axis
disabledW	Boolean	false	Whether to prohibit the component from modifying the width
disabledH	Boolean	false	Whether to prohibit components from modifying height
parent	Boolean	false	Whether the component’s Dragging and scaling are limited to its parent node, that is, the component will not exceed the parent node, and is turned off by default
handles	Array	[‘tl’, ‘tm’, ‘tr’, ‘ml’, ‘mr’, ‘bl’, ‘bm’, ‘br’ ]	Defines the handle of scaling (eight directions in total): tl: top left tm: upper middle tr: top right mr : center left ml : center right bl : lower left bm: lower middle br : Bottom right
classNameDraggable	String	‘draggable’	Customize the class name of the component, which is displayed when the component is “dragable”
classNameResizable	String	‘resizable’	Customize the component class name, which is displayed when the component is “scalable”
classNameDragging	String	‘dragging’	Define the class name displayed when the component is dragged
classNameActive	String	‘active ‘	Define the class name of the component in the active state
classNameHandle
classNameHandle
td>	String	‘handle’	The class name that defines the scaling handle
classNameHandle	String	‘handle’	The class name that defines the scaling handle

2. Vue3DraggableResizable events

Event	Input parameters	Trigger timing	Function description	Example
activated	–	Triggered when the component changes from inactive state to active state	–
deactivated	–	Triggered when the component changes from active state to inactive state	–
drag -start	{ x: number, y: number }	Triggered when the component starts dragging	–
dragging	{ x: number, y: number }	The component is dragging Continuously triggering during the process	–
drag-end	{ x: number, y: number }	Triggered when component dragging ends	–
resize-start	{ x: number, y: number, w: number, h: number }	Triggered when the component starts scaling	–
resizing	{ x: number, y: number, w: number, h: number }	The component continues to fire during the scaling process	–
resize-end	{ x: number, y: number, w: number, h: number }	Triggered when component scaling ends	–

2. Use cases of Vue3DraggableResizable

Take the vue3 project as an example to see how Vue3DraggableResizable is used:

First, introduce Vue3DraggableResizable in main.ts and hang it on the vue instance:

//Introduce drag and drop library
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

// Vue instance
const app = createApp(App)
app.use(Vue3DraggableResizable)

Then use it in the component as follows:

<template>
<!-- Drag and drop component -->
    <Vue3DraggableResizable
        v-if="isShowMapToolBar"
        classNameDraggable="draggable"
        :initW="70"
        :initH="30"
        v-model:x="dragData.x"
        v-model:y="dragData.y"
        v-model:w="dragData.w"
        v-model:h="dragData.h"
        v-model:active="dragData.active"
        :draggable="true"
        :resizable="true"
        :parent="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')"
    >
        <div>Test</div>
    </Vue3DraggableResizable>
</template>
<script setup lang="ts">
// Drag and drop configuration
const dragData = reactive({<!-- -->
    x: 10,
    y: 10,
    h: 100,
    w: 100,
    active: false,
});
//Drag event
const print = (val) => {<!-- -->
console.log(val)
};
</script>