Vue3DraggableResizable

> [Vue3 组件] 用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线。
> [ Vue3 Component ] Draggable and resizable component for vue3, and, support element adsorption alignment, real-time reference line, etc.

点击查看中文文档

Table of Contents

- Features
- Usage
- Props
- Events
- Use adsorption alignment

$3

- 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

$3

``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




`

$3

#### 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 components width can be modify or not

``html

`

#### disabledH

type: Boolean

default: false


Defines the components 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
...


...
`

$3

#### 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

`

$3

You need to import another component to use the "adsorption alignment" feature.

This can be used as follows.

`vue




`

$3

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


``