Drag and Resize elements with VueDraggableResizable

VueDraggableResizable

A lightweight plugin to create resizable and draggable elements, with many options available, based on the following features.

Features

  • No dependencies
  • Use draggable, resizable or both
  • Define handles for resizing
  • Restrict size and movement to parent element
  • Snap element to custom grid
  • Restrict drag to vertical or horizontal axis

Go to the live demo page to get a glimpse of how things work.

Example

Installation & basic usage

yard add vue-draggable-resizable

Register the component to your main.js file to make it available globally

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'

Vue.component('vue-draggable-resizable', VueDraggableResizable)

Use the component in your markup

<!-- create a border to serve as a visual box -->
<div style="height: 300px; border: 1px solid blue;">
<!-- add any elements you would like to drag & resize-->
<vue-draggable-resizable :parent="true" style="border: 1px solid black;">
<img src="../assets/logo.png">
<p>You can drag, you can resize, but you cannot move me outside the parent.</p>
</vue-draggable-resizable>
</div>

Setting :parent="true restricts the movement and the dimensions of the element to the parent.

And the result of the above:

And that is it! If you are looking for more head to the plugin's repository and take a look at all the available props and gotchas.