Resize and Drag Elements In Vue.js – vue-drag-resize

Description:

A lightweight Vue Component for draggable and resizable elements.

Features:

  • All props are reactive
  • Support touch events
  • Use draggable, resizable or both
  • Define sticks for resizing
  • Save aspect ratio for resizable components
  • Restrict size and movement to parent element
  • Restrict drag to vertical or horizontal axis

Preview:

Resize and Drag Elements In Vue.js - vue-drag-resize

Changelog:

v1.4.2 (07/31/2020)

  • bugfix

v1.4.0 (07/09/2020)

  • added: parent’s transform:scale() support
  • added: Intelligent grid snapping feature
  • added: stickSize a component prop
  • added: ‘contentClass’ property to vue-drag-resize
  • fix: set isDraggable to false, can’t active the element
  • fix: dragstop and resizestop not fired
  • fix: stop propagation and prevent event only if currently active and resizing/dragging

Download Details:

Author: kirillmurashov

Live Demo: http://kirillmurashov.com/vue-drag-resize/

Download Link: https://github.com/kirillmurashov/vue-drag-resize/archive/master.zip

Official Website: https://github.com/kirillmurashov/vue-drag-resize

Install & Download:

# NPM
$ npm install vue-drag-resize --save

You Might Be Interested In:

Add Comment