https://github.com/alvin-liu/vue-drr
A Vue2 component for draggable, resizable, rotatable elements
https://github.com/alvin-liu/vue-drr
draggable resizable rotatable vue2
Last synced: 9 months ago
JSON representation
A Vue2 component for draggable, resizable, rotatable elements
- Host: GitHub
- URL: https://github.com/alvin-liu/vue-drr
- Owner: Alvin-Liu
- License: mit
- Created: 2017-12-17T06:16:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-26T15:03:17.000Z (almost 8 years ago)
- Last Synced: 2024-12-15T11:46:06.894Z (over 1 year ago)
- Topics: draggable, resizable, rotatable, vue2
- Language: Vue
- Homepage:
- Size: 482 KB
- Stars: 31
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README-en.md
- License: LICENSE
Awesome Lists containing this project
README
VueDRR
> A Vue2 component for draggable, resizable, rotateable elements.Based on and offering all features of [vue-draggable-resizable](https://github.com/mauricius/vue-draggable-resizable "vue-draggable-resizable")
ENGLISH | [中文](./README.md)
## Table of Contents
* [Demo](#demo)
* [Install and basic usage](#install-and-basic-usage)
* [Props](#props)
* [Events](#events)
* [License](#license)
### Demo
[Demo](https://alvin-liu.github.io/vue-drr/example/index.html)
---
## Install and basic usage
```bash
$ npm install --save vue-drr
```
Register the component
```js
import Vue from 'vue'
import VueDrr from 'vue-drr'
Vue.component('vue-drr', VueDrr)
```
You may now use the component in your markup
```vue
x: {{ x }}, y: {{ y }}, angle: {{ angle }}, width: {{ width }}, height: {{ height }}
export default {
name: 'app',
data: function () {
return {
width: 200,
height: 200,
x: 50,
y: 50,
angle: 30
}
},
methods: {
handleResizing: function (x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
},
handleDragging: function (x, y) {
this.x = x
this.y = y
},
handleRotating: function (angle) {
this.angle = angle
}
}
}
```
### 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.
#### 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.
#### rotatable
Type: `Boolean`
Required: `false`
Default: `true`
Defines it the component should be rotatable 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.
#### angle
Type: `Number`
Required: `false`
Default: `0`
Define the initial angle 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: `['n', 'e', 's', 'w', 'nw', 'ne', 'se', 'sw']`
#### 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.
---
### 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 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.
#### 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.
#### dragging
Required: `false`
Parameters:
* `left` the X position of the element
* `top` the Y position of the element
Called whenever the component gets dragged.
#### 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.
#### rotating
Required: `false`
Parameters:
* `angle` the angle of the element
Called whenever the component gets rotated.
#### rotatestop
Required: `false`
Parameters:
* `angle` the angle of the element
Called whenever the component stops getting rotated.
## License
[MIT license](LICENSE)