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

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// >main.js
2import { createApp } from 'vue'
3import App from './App.vue'
4import Vue3DraggableResizable from 'vue3-draggable-resizable'
5//default styles
6import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
7
8// You will have a global component named "Vue3DraggableResizable"
9createApp(App)
10  .use(Vue3DraggableResizable)
11  .mount('#app')

You can also use it separately within the component

1// >component.js
2import { defineComponent } from 'vue'
3import Vue3DraggableResizable from 'vue3-draggable-resizable'
4//default styles
5import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
6
7export default defineComponent({
8  components: { Vue3DraggableResizable }
9  // ...other
10})

Here is a complete example of using "vue-template"

1<template>
2  <div id="app">
3    <div class="parent">
4      <Vue3DraggableResizable
5        :initW="110"
6        :initH="120"
7        v-model:x="x"
8        v-model:y="y"
9        v-model:w="w"
10        v-model:h="h"
11        v-model:active="active"
12        :draggable="true"
13        :resizable="true"
14        @activated="print('activated')"
15        @deactivated="print('deactivated')"
16        @drag-start="print('drag-start')"
17        @resize-start="print('resize-start')"
18        @dragging="print('dragging')"
19        @resizing="print('resizing')"
20        @drag-end="print('drag-end')"
21        @resize-end="print('resize-end')"
22      >
23        This is a test example
24      </Vue3DraggableResizable>
25    </div>
26  </div>
27</template>
28
29<script>
30import { defineComponent } from 'vue'
31import Vue3DraggableResizable from 'vue3-draggable-resizable'
32//default styles
33import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
34export default defineComponent({
35  components: { Vue3DraggableResizable },
36  data() {
37    return {
38      x: 100,
39      y: 100,
40      h: 100,
41      w: 100,
42      active: false
43    }
44  },
45  methods: {
46    print(val) {
47      console.log(val)
48    }
49  }
50})
51</script>
52<style>
53.parent {
54  width: 200px;
55  height: 200px;
56  position: absolute;
57  top: 100px;
58  left: 100px;
59  border: 1px solid #000;
60  user-select: none;
61}
62</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 component`s width can be modify or not

1<Vue3DraggableResizable :disabledW="true" />

disabledH

type: Boolean
default: false

Defines the component`s 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 left
• tm : Top middle
• tr : Top right
• mr : Middle right
• ml : Middle left
• bl : Bottom left
• bm : Bottom middle
• br : 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<div class="vdr-handle vdr-handle-tl my-handle my-handle-tl"></div>
3<div class="vdr-handle vdr-handle-tm my-handle my-handle-tm"></div>
4<div class="vdr-handle vdr-handle-tr my-handle my-handle-tr"></div>
5<div class="vdr-handle vdr-handle-ml my-handle my-handle-mr"></div>
6...

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<template>
2  <div id="app">
3    <div class="parent">
4      <DraggableContainer>
5        <Vue3DraggableResizable>
6          Test
7        </Vue3DraggableResizable>
8        <Vue3DraggableResizable>
9          Another test
10        </Vue3DraggableResizable>
11      </DraggableContainer>
12    </div>
13  </div>
14</template>
15
16<script>
17import { defineComponent } from 'vue'
18import Vue3DraggableResizable from 'vue3-draggable-resizable'
19// This component is not exported by default
20// If you used "app.use(Vue3DraggableResizable)"，then you don't need to import it, you can use it directly.
21import { DraggableContainer } from 'vue3-draggable-resizable'
22//default styles
23import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
24export default defineComponent({
25  components: { Vue3DraggableResizable, DraggableContainer }
26})
27</script>
28<style>
29.parent {
30  width: 200px;
31  height: 200px;
32  position: absolute;
33  top: 100px;
34  left: 100px;
35  border: 1px solid #000;
36  user-select: none;
37}
38</style>

DraggableContainer Props

These props apply to DraggableContainer

disabled

type: Boolean
default: false

Disable this feature

1<DraggableContainer :disabled="true">
2  <Vue3DraggableResizable>
3    Test
4  </Vue3DraggableResizable>
5  <Vue3DraggableResizable>
6    Another test
7  </Vue3DraggableResizable>
8</DraggableContainer>

adsorbParent

type: Boolean
default: true

Adsorption near parent component

1<DraggableContainer :adsorbParent="false">
2  <Vue3DraggableResizable>
3    Test
4  </Vue3DraggableResizable>
5  <Vue3DraggableResizable>
6    Another test
7  </Vue3DraggableResizable>
8</DraggableContainer>

adsorbCols

type: Array<Number>
default: null

Custom guides(column)

1<DraggableContainer :adsorbCols="[10,20,30]">
2  <Vue3DraggableResizable>
3    Test
4  </Vue3DraggableResizable>
5  <Vue3DraggableResizable>
6    Another test
7  </Vue3DraggableResizable>
8</DraggableContainer>

adsorbRows

type: Array<Number>
default: null

Custom guides(row)

1<DraggableContainer :adsorbRows="[10,20,30]">
2  <Vue3DraggableResizable>
3    Test
4  </Vue3DraggableResizable>
5  <Vue3DraggableResizable>
6    Another test
7  </Vue3DraggableResizable>
8</DraggableContainer>

referenceLineVisible

type: Boolean
default: true

reference line visible

1<DraggableContainer :referenceLineVisible="false">
2  <Vue3DraggableResizable>
3    Test
4  </Vue3DraggableResizable>
5  <Vue3DraggableResizable>
6    Another test
7  </Vue3DraggableResizable>
8</DraggableContainer>

referenceLineColor

type: String
default: #f00

reference line color

1<DraggableContainer :referenceLineColor="#0f0">
2  <Vue3DraggableResizable>
3    Test
4  </Vue3DraggableResizable>
5  <Vue3DraggableResizable>
6    Another test
7  </Vue3DraggableResizable>
8</DraggableContainer>