Vue3DraggableResizable
[Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线。 [ Vue3 Component ] Draggable and resizable component for vue3, and, support element adsorption alignment, real-time reference line, etc.
Table of Contents
Features
- Draggable and resizable
- Define handles for resizing
- Restrict movement and size in parent node
- Customize various class names
- Provide your own markup for handles
- Adsorption alignment
- Reference line
Usage
|
1 |
$ npm install vue3-draggable-resizable |
Register the Vue3DraggableResizable
|
1 2 3 4 5 6 7 8 9 10 11 |
// >main.js import { createApp } from 'vue' import App from './App.vue' import Vue3DraggableResizable from 'vue3-draggable-resizable' //default styles import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css' // You will have a global component named "Vue3DraggableResizable" createApp(App) .use(Vue3DraggableResizable) .mount('#app') |
You can also use it separately within the component
|
1 2 3 4 5 6 7 8 9 10 |
// >component.js import { defineComponent } from 'vue' import Vue3DraggableResizable from 'vue3-draggable-resizable' //default styles import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css' export default defineComponent({ components: { Vue3DraggableResizable } // ...other }) |
Here is a complete example of using “vue-template”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<template> <div id="app"> <div class="parent"> <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> </div> </div> </template> <script> import { defineComponent } from 'vue' import Vue3DraggableResizable from 'vue3-draggable-resizable' //default styles import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css' export default defineComponent({ components: { Vue3DraggableResizable }, data() { return { x: 100, y: 100, h: 100, w: 100, active: false } }, methods: { 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> |
Props
initW
type: Number
default: null
Set initial width(px)
|
1 |
<Vue3DraggableResizable :initW="100" /> |
initH
type: Number
default: null
Set initial height(px)
|
1 |
<Vue3DraggableResizable :initH="100" /> |
w
type: Number
default: 0
Current width(px) of the container.
You can use “v-model:w” to keeps it up-to-date
|
1 |
<Vue3DraggableResizable v-model:w="100" /> |
h
type: Number
default: 0
Current height(px) of the container.
You can use “v-model:h” to keeps it up-to-date
|
1 |
<Vue3DraggableResizable v-model:h="100" /> |
x
type: Number
default: 0
Current left(px) of the container.
You can use “v-model:x” to keeps it up-to-date
|
1 |
<Vue3DraggableResizable v-model:x="100" /> |
y
type: Number
default: 0
The current top(px) of the container.
You can use “v-model:y” to keeps it up-to-date
|
1 |
<Vue3DraggableResizable v-model:y="100" /> |
minW
type: Number
default: 20
Minimum width(px)
|
1 |
<Vue3DraggableResizable :minW="100" /> |
minH
type: Number
default: 20
Minimum height(px)
|
1 |
<Vue3DraggableResizable :minH="100" /> |
active
type: Boolean
default: false
Indicates whether the component is selected.
You can use “v-model:active” to keeps it up-to-date
|
1 |
<Vue3DraggableResizable v-model:active="100" /> |
draggable
type: Boolean
default: true
Defines the component can be draggable or not
|
1 |
<Vue3DraggableResizable :draggable="true" /> |
resizable
type: Boolean
default: true
Defines the component can be resizable or not
|
1 |
<Vue3DraggableResizable :draggable="true" /> |
lockAspectRatio
type: Boolean
default: false
The lockAspectRatio property is used to lock aspect ratio.
|
1 |
<Vue3DraggableResizable :lockAspectRatio="true" /> |
disabledX
type: Boolean
default: false
Defines the component can be moved on x-axis or not
|
1 |
<Vue3DraggableResizable :disabledX="true" /> |
disabledY
type: Boolean
default: false
Defines the component can be moved on y-axis or not
|
1 |
<Vue3DraggableResizable :disabledY="true" /> |
disabledW
type: Boolean
default: false
Defines the components width can be modify or not
|
1 |
<Vue3DraggableResizable :disabledW="true" /> |
disabledH
type: Boolean
default: false
Defines the components height can be modify or not
|
1 |
<Vue3DraggableResizable :disabledH="true" /> |
parent
type: Boolean
default: false
Restrict movement and size within its parent node
|
1 |
<Vue3DraggableResizable :parent="true" /> |
handles
type: Array
default: ['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']
Define the array of handles to restrict the element resizing
tl: Top lefttm: Top middletr: Top rightmr: Middle rightml: Middle leftbl: Bottom leftbm: Bottom middlebr: Bottom right
|
1 |
<Vue3DraggableResizable :handles="['tl','tr','bl','br']" /> |
classNameDraggable
type: String
default: draggable
Used to set the custom class of a draggable-resizable component when draggable is enable.
|
1 |
<Vue3DraggableResizable classNameDraggable="draggable" /> |
classNameResizable
type: String
default: resizable
Used to set the custom class of a draggable-resizable component when resizable is enable.
|
1 |
<Vue3DraggableResizable classNameResizable="resizable" /> |
classNameDragging
type: String
default: dragging
Used to set the custom class of a draggable-resizable component when is dragging.
|
1 |
<Vue3DraggableResizable classNameDragging="dragging" /> |
classNameResizing
type: String
default: resizing
Used to set the custom class of a draggable-resizable component when is resizing.
|
1 |
<Vue3DraggableResizable classNameResizing="resizing" /> |
classNameActive
type: String
default: active
Used to set the custom class of a draggable-resizable component when is active.
|
1 |
<Vue3DraggableResizable classNameActive="active" /> |
classNameHandle
type: String
default: handle
Used to set the custom common class of each handle element.
|
1 |
<Vue3DraggableResizable classNameHandle="my-handle" /> |
following handle nodes will be rendered
|
1 2 3 4 5 6 |
... <div class="vdr-handle vdr-handle-tl my-handle my-handle-tl"></div> <div class="vdr-handle vdr-handle-tm my-handle my-handle-tm"></div> <div class="vdr-handle vdr-handle-tr my-handle my-handle-tr"></div> <div class="vdr-handle vdr-handle-ml my-handle my-handle-mr"></div> ... |
Events
activated
payload: -
|
1 |
<Vue3DraggableResizable @activated="activatedHandle" /> |
deactivated
payload: -
|
1 |
<Vue3DraggableResizable @deactivated="deactivatedHandle" /> |
drag-start
payload: { x: number, y: number }
|
1 |
<Vue3DraggableResizable @drag-start="dragStartHandle" /> |
dragging
payload: { x: number, y: number }
|
1 |
<Vue3DraggableResizable @dragging="dragStartHandle" /> |
drag-end
payload: { x: number, y: number }
|
1 |
<Vue3DraggableResizable @drag-end="dragEndHandle" /> |
resize-start
payload: { x: number, y: number, w: number, h: number }
|
1 |
<Vue3DraggableResizable @resize-start="resizeStartHandle" /> |
resizing
payload: { x: number, y: number, w: number, h: number }v
|
1 |
<Vue3DraggableResizable @resizing="resizingHandle" /> |
resize-end
payload: { x: number, y: number, w: number, h: number }
|
1 |
<Vue3DraggableResizable @resize-end="resizeEndHandle" /> |
Use-adsorption-alignment
You need to import another component to use the “adsorption alignment” feature.
This can be used as follows.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<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 Vue3DraggableResizable from 'vue3-draggable-resizable' // This component is not exported by default // If you used "app.use(Vue3DraggableResizable)"，then you don't need to import it, you can use it directly. import { DraggableContainer } from 'vue3-draggable-resizable' //default styles 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> |
DraggableContainer Props
These props apply to DraggableContainer
disabled
type: Boolean
default: false
Disable this feature
|
1 2 3 4 5 6 7 8 |
<DraggableContainer :disabled="true"> <Vue3DraggableResizable> Test </Vue3DraggableResizable> <Vue3DraggableResizable> Another test </Vue3DraggableResizable> </DraggableContainer> |
adsorbParent
type: Boolean
default: true
Adsorption near parent component
|
1 2 3 4 5 6 7 8 |
<DraggableContainer :adsorbParent="false"> <Vue3DraggableResizable> Test </Vue3DraggableResizable> <Vue3DraggableResizable> Another test </Vue3DraggableResizable> </DraggableContainer> |
adsorbCols
type: Array
default: null
Custom guides(column)
|
1 2 3 4 5 6 7 8 |
<DraggableContainer :adsorbCols="[10,20,30]"> <Vue3DraggableResizable> Test </Vue3DraggableResizable> <Vue3DraggableResizable> Another test </Vue3DraggableResizable> </DraggableContainer> |
adsorbRows
type: Array
default: null
Custom guides(row)
|
1 2 3 4 5 6 7 8 |
<DraggableContainer :adsorbRows="[10,20,30]"> <Vue3DraggableResizable> Test </Vue3DraggableResizable> <Vue3DraggableResizable> Another test </Vue3DraggableResizable> </DraggableContainer> |
referenceLineVisible
type: Boolean
default: true
reference line visible
|
1 2 3 4 5 6 7 8 |
<DraggableContainer :referenceLineVisible="false"> <Vue3DraggableResizable> Test </Vue3DraggableResizable> <Vue3DraggableResizable> Another test </Vue3DraggableResizable> </DraggableContainer> |
referenceLineColor
type: String
default: #f00
reference line color
|
1 2 3 4 5 6 7 8 |
<DraggableContainer :referenceLineColor="#0f0"> <Vue3DraggableResizable> Test </Vue3DraggableResizable> <Vue3DraggableResizable> Another test </Vue3DraggableResizable> </DraggableContainer> |
