Vue3DraggableResizable

[ Vue3 Component ] Draggable and resizable component for vue3

Features

• At present, only "draggable" feature is supported, I will update the "resizable" feature as soon as possible.

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

Events

activated

payload: -

<vue3DraggableResizable @activated="activatedHandle"/>

deactivated

payload: -

<vue3DraggableResizable @deactivated="deactivatedHandle"/>

drag-start

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

<vue3DraggableResizable @drag-start="dragStartHandle"/>

dragging

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

<vue3DraggableResizable @dragging="dragStartHandle"/>

drag-end

payload: { x: number, y: number, w: number, h: 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"/>