Resize Element With Drag And Drop – VueResizable

A small and configurable resizable component that allows the user to resize an element using drag and drop. Compatible with Vue 3 and Vue 2.

How to use it:

1. Import and register the VueResizable component.

import VueResizable from 'vue-resizable'

export default {
  name: "YourApp",
  components: {VueResizable}
}

2. Insert a resizable element into your component.

<template>
  <vue-resizable>
    <div class="resizable-content"></div>
  </vue-resizable>
</template>

3. Default props to config the resizable component.

width: {
  default: 200,
  type: [Number, String]
},
minWidth: {
  default: 0,
  type: Number
},
maxWidth: {
  default: undefined,
  type: Number,
},
height: {
  default: 200,
  type: [Number, String]
},
minHeight: {
  default: 0,
  type: Number
},
maxHeight: {
  default: undefined,
  type: Number
},
left: {
  default: 0,
  type: [Number, String]
},
top: {
  default: 0,
  type: [Number, String]
},
active: {
  default: () => ['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt'],
  validator: (val) => ['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt'].filter(value => val.indexOf(value) !== -1).length === val.length,
  type: Array
},
fitParent: {
  default: false,
  type: Boolean
},
dragSelector: {
  default: undefined,
  type: String
}

4. Event handlers.

• mount(eventName,left,top,width,height): Called after the component is mounted
• destroy(eventName,left,top,width,height): Called before the component is destroyed
• resize:start(eventName,left,top,width,height): Called after clicking on one of the active handlers
• resize:move(eventName,left,top,width,height): Called when a handler is being dragged
• resize:end(eventName,left,top,width,height): Called when the mouse button was released after resize
• drag:start(eventName,left,top,width,height): Called after clicking on one of the drag elements
• drag:move(eventName,left,top,width,height): Called when a drag element is being dragged
• drag:end(eventName,left,top,width,height): Called when the mouse button was released after drag

Preview:

Changelog:

v2.1.7 (07/06/2022)

• added component instance in event payload

v2.1.5 (04/21/2022)

• update

v2.1.2 (03/16/2022)

• update

v2.0.5 (05/07/2021)

• compatibility with vue2

v2.0.4 (05/07/2021)

• events rollback

v2.0.1 (03/08/2021)

• Added ’emits’

v2.0.0 (03/06/2021)

• Update for Vue 3

v1.2.5 (09/16/2020)

• disabled attributes do not change inline styles

v1.2.3 (08/09/2020)

• touch events support

v1.2.2 (08/02/2020)

• update

v1.2.1 (07/31/2020)

• remove old drag classes

Download Details:

Author: nikitasnv

Live Demo: https://nikitasnv.github.io/vue-resizable/

Download Link: https://github.com/nikitasnv/vue-resizable/archive/master.zip

Official Website: https://github.com/nikitasnv/vue-resizable

Install & Download:

# NPM
$ npm install vue-resizable --save