VueDraggableResizable
Forked and revised from https://mauricius.github.io/vue-draggable-resizable/
Vue2 Component for draggable and resizable elements.
Table of Contents
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
Demo
Install and basic usage
$ npm install --save vue-draggable-resizable
Register the component
Vue
You may now use the component in your markup
<template> <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;"> <vue-draggable-resizable :w="100" :h="100" v-on:dragging="onDrag" v-on:resizing="onResize" :parent="true"> <p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br> X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p> </vue-draggable-resizable> </div></template> <script>import VueDraggableResizable from 'vue-draggable-resizable' export default { data: function () { return { width: 0, height: 0, x: 0, y: 0 } }, methods: { onResize: function (x, y, width, height) { this.x = x this.y = y this.width = width this.height = height }, onDrag: function (x, y) { this.x = x this.y = y } }}</script>
Props
draggable
Type: Boolean
Required: false
Default: true
Defines it the component should be draggable or not.
resizable
Type: Boolean
Required: false
Default: true
Defines it the component should be resizable or not.
w
Type: Number
Required: false
Default: 200
Define the initial width of the element.
h
Type: Number
Required: false
Default: 200
Define the initial height of the element.
minw
Type: Number
Required: false
Default: 50
Define the minimal width of the element.
minh
Type: Number
Required: false
Default: 50
Define the minimal height of the element.
x
Type: Number
Required: false
Default: 0
Define the initial x position of the element.
y
Type: Number
Required: false
Default: 0
Define the initial y position of the element.
handles
Type: Array
Required: false
Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']
Define the array of handles to restrict the element resizing:
tl
- Top lefttm
- Top middletr
- Top rightmr
- Middle rightbr
- Bottom rightbm
- Bottom middlebl
- Bottom leftml
- Middle left
axis
Type: String
Required: false
Default: both
Define the axis on which the element is draggable. Available values are x
, y
or both
.
grid
Type: Array
Required: false
Default: [1,1]
Define the grid on which the element is snapped.
parent
Type: Boolean
Required: false
Default: false
Restricts the movement and the dimensions of the element to the parent.
maximize
Type: Boolean
Required: false
Default: true
If set to false
prevents the component to fill its parent when double-clicked.
Events
activated
Required: false
Parameters: -
Called whenever the component gets clicked, in order to show handles.
deactivated
Required: false
Parameters: -
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
resizing
Required: false
Parameters:
left
the X position of the elementtop
the Y position of the elementwidth
the width of the elementheight
the height of the element
Called whenever the component gets resized.
resizestop
Required: false
Parameters:
left
the X position of the elementtop
the Y position of the elementwidth
the width of the elementheight
the height of the element
Called whenever the component stops getting resized.
dragging
Required: false
Parameters:
left
the X position of the elementtop
the Y position of the element
Called whenever the component gets dragged.
dragstop
Required: false
Parameters:
left
the X position of the elementtop
the Y position of the element
Called whenever the component stops getting dragged.
Gotchas
Be careful to use appropriate values for x
, y
, w
, h
, minh
and minh
props when you want to restrict the component in its parent element.
Bonus
If resizing
, parent
and maximize
props are true
you can double-click on the element to make it fill the parent.
Contributing
Any contribution to the code or any part of the documentation and any idea and/or suggestion are very welcome.
# serve with hot reload at localhost:8080npm run dev# distribution buildnpm run build# build the docs into gh-pagesnpm run docs# run unit testsnpm run test