Need help with vue3-draggable-resizable?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

a7650
172 Stars 40 Forks MIT License 35 Commits 11 Opened issues

Description

[Vue3 组件] 用于拖拽调整位置和大小的的组件,同时支持冲突检测,元素吸附对齐,实时参考线。

Services available

!
?

Need anything else?

Contributors list

logo

Vue3DraggableResizable

npm version Software License npm vue version

[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"


Props

initW

type:

Number

default:
null

Set initial width(px)


initH

type:

Number

default:
null

Set initial height(px)


w

type:

Number

default:
0

Current width(px) of the container.
You can use "v-model:w" to keeps it up-to-date


h

type:

Number

default:
0

Current height(px) of the container.
You can use "v-model:h" to keeps it up-to-date


x

type:

Number

default:
0

Current left(px) of the container.
You can use "v-model:x" to keeps it up-to-date


y

type:

Number

default:
0

The current top(px) of the container.
You can use "v-model:y" to keeps it up-to-date


minW

type:

Number

default:
20

Minimum width(px)


minH

type:

Number

default:
20

Minimum height(px)


active

type:

Boolean

default:
false

Indicates whether the component is selected.
You can use "v-model:active" to keeps it up-to-date


draggable

type:

Boolean

default:
true

Defines the component can be draggable or not


resizable

type:

Boolean

default:
true

Defines the component can be resizable or not


lockAspectRatio

type:

Boolean

default:
false

The

lockAspectRatio
property is used to lock aspect ratio.

disabledX

type:

Boolean

default:
false

Defines the component can be moved on x-axis or not


disabledY

type:

Boolean

default:
false

Defines the component can be moved on y-axis or not


disabledW

type:

Boolean

default:
false

Defines the component`s width can be modify or not


disabledH

type:

Boolean

default:
false

Defines the component`s height can be modify or not


parent

type:

Boolean

default:
false

Restrict movement and size within its parent node


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

classNameDraggable

type:

String

default:
draggable

Used to set the custom

class
of a draggable-resizable component when
draggable
is enable.

classNameResizable

type:

String

default:
resizable

Used to set the custom

class
of a draggable-resizable component when
resizable
is enable.

classNameDragging

type:

String

default:
dragging

Used to set the custom

class
of a draggable-resizable component when is dragging.

classNameResizing

type:

String

default:
resizing

Used to set the custom

class
of a draggable-resizable component when is resizing.

classNameActive

type:

String

default:
active

Used to set the custom

class
of a draggable-resizable component when is active.

classNameHandle

type:

String

default:
handle

Used to set the custom common

class
of each handle element.

following handle nodes will be rendered

...
...

Events

activated

payload:

-

deactivated

payload:

-

drag-start

payload:

{ x: number, y: number }

dragging

payload:

{ x: number, y: number }

drag-end

payload:

{ x: number, y: number }

resize-start

payload:

{ x: number, y: number, w: number, h: number }

resizing

payload:

{ x: number, y: number, w: number, h: number }v

resize-end

payload:

{ x: number, y: number, w: number, h: number }

Use-adsorption-alignment

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

This can be used as follows.


DraggableContainer Props

These props apply to DraggableContainer

disabled

type:

Boolean

default:
false

Disable this feature

  
    Test
  
  
    Another test
  

adsorbParent

type:

Boolean

default:
true

Adsorption near parent component

  
    Test
  
  
    Another test
  

adsorbCols

type:

Array

default:
null

Custom guides(column)

  
    Test
  
  
    Another test
  

adsorbRows

type:

Array

default:
null

Custom guides(row)

  
    Test
  
  
    Another test
  

referenceLineVisible

type:

Boolean

default:
true

reference line visible

  
    Test
  
  
    Another test
  

referenceLineColor

type:

String

default:
#f00

reference line color

  
    Test
  
  
    Another test
  

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.