vue-draggable-resizable-ngsoftdev v1.7.1
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
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
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
active
Type: Boolean
Required: false
Default: false
Determines if the component should be active or not. The prop reacts to changes and also can be used with the sync
modifier to keep the state in sync with the parent.
<vue-draggable-resizable :active="true">
draggable
Type: Boolean
Required: false
Default: true
Defines it the component should be draggable or not.
<vue-draggable-resizable :draggable="false">
resizable
Type: Boolean
Required: false
Default: true
Defines it the component should be resizable or not.
<vue-draggable-resizable :resizable="false">
w
Type: Number
Required: false
Default: 200
Define the initial width of the element.
<vue-draggable-resizable :w="200">
h
Type: Number
Required: false
Default: 200
Define the initial height of the element.
<vue-draggable-resizable :h="200">
minw
Type: Number
Required: false
Default: 50
Define the minimal width of the element.
<vue-draggable-resizable :minw="50">
minh
Type: Number
Required: false
Default: 50
Define the minimal height of the element.
<vue-draggable-resizable :minh="50">
x
Type: Number
Required: false
Default: 0
Define the initial x position of the element.
<vue-draggable-resizable :x="0">
y
Type: Number
Required: false
Default: 0
Define the initial y position of the element.
<vue-draggable-resizable :y="0">
z
Type: Number|String
Required: false
Default: auto
Define the zIndex of the element.
<vue-draggable-resizable :z="999">
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
<vue-draggable-resizable :handles="['tm','bm','ml','mr']">
axis
Type: String
Required: false
Default: both
Define the axis on which the element is draggable. Available values are x
, y
or both
.
<vue-draggable-resizable axis="x">
grid
Type: Array
Required: false
Default: [1,1]
Define the grid on which the element is snapped.
<vue-draggable-resizable :grid="[1,1]">
parent
Type: Boolean
Required: false
Default: false
Restricts the movement and the dimensions of the element to the parent.
<vue-draggable-resizable :parent="true">
dragHandle
Type: String
Required: false
Defines the selector that should be used to drag the component.
<vue-draggable-resizable drag-handle=".drag">
dragCancel
Type: String
Required: false
Defines a selector that should be used to prevent drag initialization.
<vue-draggable-resizable drag-cancel=".drag">
maximize
Type: Boolean
Required: false
Default: false
If set to true
allows the component to fill its parent when double-clicked.
<vue-draggable-resizable :maximize="true">
Events
activated
Required: false
Parameters: -
Called whenever the component gets clicked, in order to show handles.
<vue-draggable-resizable @activated="onActivated">
deactivated
Required: false
Parameters: -
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
<vue-draggable-resizable @deactivated="onDeactivated">
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.
<vue-draggable-resizable @resizing="onResizing">
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.
<vue-draggable-resizable @resizestop="onResizstop">
dragging
Required: false
Parameters:
left
the X position of the elementtop
the Y position of the element
Called whenever the component gets dragged.
<vue-draggable-resizable @dragging="onDragging">
dragstop
Required: false
Parameters:
left
the X position of the elementtop
the Y position of the element
Called whenever the component stops getting dragged.
<vue-draggable-resizable @dragstop="onDragstop">
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.
Roadmap
- Touch support (thanks @ojczeo)
- Fix grid issues (#34, #58) - In progress
- Implement Storybook - In progress
- Aspect ratio on resizing (#26) - In progress
maxWidth
andmaxHeight
props (#76) - In progress- Different approach with CSS styles (#73)
- Watching props for changes (requires refactoring and possibly breaking changes)
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:8080
npm run dev
# distribution build
npm run build
# build the docs into gh-pages
npm run docs
# run unit tests
npm run test
License
7 years ago