Vue3DraggableResizable
[](https://www.npmjs.com/package/vue3-draggable-resizable)
[](LICENSE.md)
[](https://www.npmjs.com/package/vue3-draggable-resizable)
[](https://github.com/a7650/vue3-draggable-resizable)
> [Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线。
> [ Vue3 Component ] Draggable and resizable component for vue3, and, support element adsorption alignment, real-time reference line, etc.
[点击查看中文文档](https://github.com/songyu719/vue3-draggable-resizable/blob/main/docs/document_zh.md)
## Table of Contents
- [Features](#features)
- [Usage](#Usage)
- [Props](#props)
- [Events](#events)
- [Use adsorption alignment](#Use-adsorption-alignment)
### 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
```bash
$ npm install vue3-draggable-resizable
```
Register the Vue3DraggableResizable
```js
// >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
```js
// >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"
```vue
```
### Props
#### initW
type: `Number`
default: `null`
Set initial width(px)
```html
```
#### initH
type: `Number`
default: `null`
Set initial height(px)
```html
```
#### w
type: `Number`
default: `0`
Current width(px) of the container.
You can use "v-model:w" to keeps it up-to-date
```html
```
#### h
type: `Number`
default: `0`
Current height(px) of the container.
You can use "v-model:h" to keeps it up-to-date
```html
```
#### x
type: `Number`
default: `0`
Current left(px) of the container.
You can use "v-model:x" to keeps it up-to-date
```html
```
#### y
type: `Number`
default: `0`
The current top(px) of the container.
You can use "v-model:y" to keeps it up-to-date
```html
```
#### minW
type: `Number`
default: `20`
Minimum width(px)
```html
```
#### minH
type: `Number`
default: `20`
Minimum height(px)
```html
```
#### active
type: `Boolean`
default: `false`
Indicates whether the component is selected.
You can use "v-model:active" to keeps it up-to-date
```html
```
#### draggable
type: `Boolean`
default: `true`
Defines the component can be draggable or not
```html
```
#### resizable
type: `Boolean`
default: `true`
Defines the component can be resizable or not
```html
```
#### lockAspectRatio
type: `Boolean`
default: `false`
The `lockAspectRatio` property is used to lock aspect ratio.
```html
```
#### disabledX
type: `Boolean`
default: `false`
Defines the component can be moved on x-axis or not
```html
```
#### disabledY
type: `Boolean`
default: `false`
Defines the component can be moved on y-axis or not
```html
```
#### disabledW
type: `Boolean`
default: `false`
Defines the component`s width can be modify or not
```html
```
#### disabledH
type: `Boolean`
default: `false`
Defines the component`s height can be modify or not
```html
```
#### parent
type: `Boolean`
default: `false`
Restrict movement and size within its parent node
```html
```
#### handles
type: `Array`
default: `['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']`
Define the array of handles to restrict the element resizing
- `tl` : Top left
- `tm` : Top middle
- `tr` : Top right
- `mr` : Middle right
- `ml` : Middle left
- `bl` : Bottom left
- `bm` : Bottom middle
- `br` : Bottom right
```html
```
#### classNameDraggable
type: `String`
default: `draggable`
Used to set the custom `class` of a draggable-resizable component when `draggable` is enable.
```html
```
#### classNameResizable
type: `String`
default: `resizable`
Used to set the custom `class` of a draggable-resizable component when `resizable` is enable.
```html
```
#### classNameDragging
type: `String`
default: `dragging`
Used to set the custom `class` of a draggable-resizable component when is dragging.
```html
```
#### classNameResizing
type: `String`
default: `resizing`
Used to set the custom `class` of a draggable-resizable component when is resizing.
```html
```
#### classNameActive
type: `String`
default: `active`
Used to set the custom `class` of a draggable-resizable component when is active.
```html
```
#### classNameHandle
type: `String`
default: `handle`
Used to set the custom common `class` of each handle element.
```html
```
following handle nodes will be rendered
```html
...
...
```
### parent-scale-x parent-scale-y
used to tell Vue3DraggableResizable how parent scale to fix mouse positon issue
eg:
```html
...
...
```
### Events
#### activated
payload: `-`
```html
```
#### deactivated
payload: `-`
```html
```
#### drag-start
payload: `{ x: number, y: number }`
```html
```
#### dragging
payload: `{ x: number, y: number }`
```html
```
#### drag-end
payload: `{ x: number, y: number }`
```html
```
#### resize-start
payload: `{ x: number, y: number, w: number, h: number }`
```html
```
#### resizing
payload: `{ x: number, y: number, w: number, h: number }v`
```html
```
#### resize-end
payload: `{ x: number, y: number, w: number, h: number }`
```html
```
### Use-adsorption-alignment
You need to import another component to use the "adsorption alignment" feature.
This can be used as follows.
```vue
```
### DraggableContainer Props
These props apply to DraggableContainer
#### disabled
type: `Boolean`
default: `false`
Disable this feature
```html
Test
Another test
```
#### adsorbParent
type: `Boolean`
default: `true`
Adsorption near parent component
```html
Test
Another test
```
#### adsorbCols
type: `Array`
default: `null`
Custom guides(column)
```html
Test
Another test
```
#### adsorbRows
type: `Array`
default: `null`
Custom guides(row)
```html
Test
Another test
```
#### referenceLineVisible
type: `Boolean`
default: `true`
reference line visible
```html
Test
Another test
```
#### referenceLineColor
type: `String`
default: `#f00`
reference line color
```html
Test
Another test
```