Resize Element With Drag And Drop Using Javascript | VueResizable

VueResizable is a small, configurable resizable component that allows the user to resize an element using drag and drop.

Must Read: Vue.js Drag and Drop Tree View Component Library


How to make use of it:

Install and download:

$ npm install vue-resizable --save

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.

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

3. The default props to configure 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


Must Read: Angular 2+ Drag and Drop File Uploader | ngx-uploader

PropertyData attributeTypeDefaultDescription
widthw[Number, String]undefinedWidth in pixel or ‘auto’
minWidthminWNumber0Minimum width
maxWidthmaxWNumberundefinedMaximum width
heighth[Number, String]undefinedHeight in pixel, or ‘auto’
minHeightminHNumber0Minimum height
maxHeightmaxHNumberundefinedMaximum height
leftl[Number, String]0Offset left from parent
topt[Number, String]0Offset top from parent
activeArray[‘r’, ‘rb’, ‘b’, ‘lb’, ‘l’, ‘lt’, ‘t’, ‘rt’]Active handlers for resize
fitParentBooleanfalseRespect parent’s size on resizing
dragSelectordragElementsStringundefinedDrag selector
maximizeBooleanfalseMaximize element to parent size
disableAttributescalcMapArray[]Disable changes to attributes, Available values: [‘l’, ‘t’, ‘w’, ‘h’]


Must Read: Advanced Drag and Drop File Picker for Uploader | jquery-formhelper

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
maximize[eventName, left, top, width, height, state]Called when the “maximize” state changed

See Demo And Download

Official Website(nikitasnv): Click Here`

This superior jQuery/javascript plugin is developed by nikitasnv. For extra Advanced Usage, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…

Leave a Reply

Your email address will not be published. Required fields are marked *