[](https://npmjs.com/package/vue-draggable-resizable)
[](LICENSE.md)
[](https://www.npmjs.com/package/vue-draggable-resizable)
> Vue2 Component for draggable and resizable elements.
## Table of Contents
* [Features](#features)
* [Demo](#demo)
* [Install and basic usage](#install-and-basic-usage)
* [Props](#props)
* [Events](#events)
* [Gotchas](#gotchas)
* [Roadmap](#roadmap)
* [Contributing](#contributing)
* [License](#license)
### 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
[Demo](https://mauricius.github.io/vue-draggable-resizable/)
---
## Install and basic usage
```bash
$ npm install --save vue-draggable-resizable
```
Register the component
```js
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
```vue
Hello! I'm a flexible component. You can drag me around and you can resize me.
X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}
```
### 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](https://vuejs.org/v2/guide/components.html#sync-Modifier) to keep the state in sync with the parent.
```html
```
#### draggable
Type: `Boolean`
Required: `false`
Default: `true`
Defines it the component should be draggable or not.
```html
```
#### resizable
Type: `Boolean`
Required: `false`
Default: `true`
Defines it the component should be resizable or not.
```html
```
#### w
Type: `Number`
Required: `false`
Default: `200`
Define the initial width of the element.
```html
```
#### h
Type: `Number`
Required: `false`
Default: `200`
Define the initial height of the element.
```html
```
#### minw
Type: `Number`
Required: `false`
Default: `50`
Define the minimal width of the element.
```html
```
#### minh
Type: `Number`
Required: `false`
Default: `50`
Define the minimal height of the element.
```html
```
#### x
Type: `Number`
Required: `false`
Default: `0`
Define the initial x position of the element.
```html
```
#### y
Type: `Number`
Required: `false`
Default: `0`
Define the initial y position of the element.
```html
```
#### z
Type: `Number|String`
Required: `false`
Default: `auto`
Define the zIndex of the element.
```html
```
#### 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 left
* `tm` - Top middle
* `tr` - Top right
* `mr` - Middle right
* `br` - Bottom right
* `bm` - Bottom middle
* `bl` - Bottom left
* `ml` - Middle left
```html
```
#### axis
Type: `String`
Required: `false`
Default: `both`
Define the axis on which the element is draggable. Available values are `x`, `y` or `both`.
```html
```
#### grid
Type: `Array`
Required: `false`
Default: `[1,1]`
Define the grid on which the element is snapped.
```html
```
#### parent
Type: `Boolean`
Required: `false`
Default: `false`
Restricts the movement and the dimensions of the element to the parent.
```html
```
#### dragHandle
Type: `String`
Required: `false`
Defines the selector that should be used to drag the component.
```html
```
#### dragCancel
Type: `String`
Required: `false`
Defines a selector that should be used to prevent drag initialization.
```html
```
#### maximize
Type: `Boolean`
Required: `false`
Default: `false`
If set to `true` allows the component to fill its parent when double-clicked.
```html
```
---
### Events
#### activated
Required: `false`
Parameters: `-`
Called whenever the component gets clicked, in order to show handles.
```html
```
#### deactivated
Required: `false`
Parameters: `-`
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
```html
```
#### resizing
Required: `false`
Parameters:
* `left` the X position of the element
* `top` the Y position of the element
* `width` the width of the element
* `height` the height of the element
Called whenever the component gets resized.
```html
```
#### resizestop
Required: `false`
Parameters:
* `left` the X position of the element
* `top` the Y position of the element
* `width` the width of the element
* `height` the height of the element
Called whenever the component stops getting resized.
```html
```
#### dragging
Required: `false`
Parameters:
* `left` the X position of the element
* `top` the Y position of the element
Called whenever the component gets dragged.
```html
```
#### dragstop
Required: `false`
Parameters:
* `left` the X position of the element
* `top` the Y position of the element
Called whenever the component stops getting dragged.
```html
```
### 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
- [x] Touch support (thanks @ojczeo)
- [ ] Fix grid issues (#34, #58) - In progress
- [ ] Implement Storybook - In progress
- [ ] Aspect ratio on resizing (#26) - In progress
- [ ] `maxWidth` and `maxHeight` 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.
``` bash
# 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
[MIT license](LICENSE)
