@synqueit/vue3-draggable-resizable
v1.6.1
Published
[Vue3 Component] 拖拽缩放并具有自动吸附对齐、参考线等功能
Downloads
2
Readme
[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
$ npm install vue3-draggable-resizable
Register the Vue3DraggableResizable
// >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
// >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"
<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)
<Vue3DraggableResizable :initW="100" />
initH
type: Number
default: null
Set initial height(px)
<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
<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
<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
<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
<Vue3DraggableResizable v-model:y="100" />
minW
type: Number
default: 20
Minimum width(px)
<Vue3DraggableResizable :minW="100" />
minH
type: Number
default: 20
Minimum height(px)
<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
<Vue3DraggableResizable v-model:active="100" />
draggable
type: Boolean
default: true
Defines the component can be draggable or not
<Vue3DraggableResizable :draggable="true" />
resizable
type: Boolean
default: true
Defines the component can be resizable or not
<Vue3DraggableResizable :draggable="true" />
lockAspectRatio
type: Boolean
default: false
The lockAspectRatio
property is used to lock aspect ratio.
<Vue3DraggableResizable :lockAspectRatio="true" />
disabledX
type: Boolean
default: false
Defines the component can be moved on x-axis or not
<Vue3DraggableResizable :disabledX="true" />
disabledY
type: Boolean
default: false
Defines the component can be moved on y-axis or not
<Vue3DraggableResizable :disabledY="true" />
disabledW
type: Boolean
default: false
Defines the component`s width can be modify or not
<Vue3DraggableResizable :disabledW="true" />
disabledH
type: Boolean
default: false
Defines the component`s height can be modify or not
<Vue3DraggableResizable :disabledH="true" />
parent
type: Boolean
default: false
Restrict movement and size within its parent node
<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
<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.
<Vue3DraggableResizable classNameDraggable="draggable" />
classNameResizable
type: String
default: resizable
Used to set the custom class
of a draggable-resizable component when resizable
is enable.
<Vue3DraggableResizable classNameResizable="resizable" />
classNameDragging
type: String
default: dragging
Used to set the custom class
of a draggable-resizable component when is dragging.
<Vue3DraggableResizable classNameDragging="dragging" />
classNameResizing
type: String
default: resizing
Used to set the custom class
of a draggable-resizable component when is resizing.
<Vue3DraggableResizable classNameResizing="resizing" />
classNameActive
type: String
default: active
Used to set the custom class
of a draggable-resizable component when is active.
<Vue3DraggableResizable classNameActive="active" />
classNameHandle
type: String
default: handle
Used to set the custom common class
of each handle element.
<Vue3DraggableResizable classNameHandle="my-handle" />
following handle nodes will be rendered
...
<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: -
<Vue3DraggableResizable @activated="activatedHandle" />
deactivated
payload: -
<Vue3DraggableResizable @deactivated="deactivatedHandle" />
drag-start
payload: { x: number, y: number }
<Vue3DraggableResizable @drag-start="dragStartHandle" />
dragging
payload: { x: number, y: number }
<Vue3DraggableResizable @dragging="dragStartHandle" />
drag-end
payload: { x: number, y: number }
<Vue3DraggableResizable @drag-end="dragEndHandle" />
resize-start
payload: { x: number, y: number, w: number, h: number }
<Vue3DraggableResizable @resize-start="resizeStartHandle" />
resizing
payload: { x: number, y: number, w: number, h: number }v
<Vue3DraggableResizable @resizing="resizingHandle" />
resize-end
payload: { x: number, y: number, w: number, h: number }
<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.
<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
<DraggableContainer :disabled="true">
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>
adsorbParent
type: Boolean
default: true
Adsorption near parent component
<DraggableContainer :adsorbParent="false">
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>
adsorbCols
type: Array<Number>
default: null
Custom guides(column)
<DraggableContainer :adsorbCols="[10,20,30]">
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>
adsorbRows
type: Array<Number>
default: null
Custom guides(row)
<DraggableContainer :adsorbRows="[10,20,30]">
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>
referenceLineVisible
type: Boolean
default: true
reference line visible
<DraggableContainer :referenceLineVisible="false">
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>
referenceLineColor
type: String
default: #f00
reference line color
<DraggableContainer :referenceLineColor="#0f0">
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>