Drag and Resize elements with VueDraggableResizable
A lightweight plugin to create resizable and draggable elements, with many options available, based on the following 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.
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>
: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.