A Vue2 component for draggable, resizable, rotateable elements.Based on and offering all features of vue-draggable-resizable
ENGLISH | 中文
$ npm install --save vue-drrRegister the component
import Vue from 'vue'
import VueDrr from 'vue-drr'
Vue.component('vue-drr', VueDrr)You may now use the component in your markup
<template>
<div id="app">
<div style="height: 500px; width: 500px; margin: 20px; border: 1px solid red; position: relative;">
<vue-drr
:x="x"
:y="y"
:angle="angle"
:w="width"
:h="height"
:parent="true"
@dragging="handleDragging"
@resizing="handleResizing"
@rotating="handleRotating"
>
<p>x: {{ x }}, y: {{ y }}, angle: {{ angle }}, width: {{ width }}, height: {{ height }}</p>
</vue-drr>
</div>
</div>
</template>
<script>
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
}
}
}
</script>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 syncmodifier to keep the state in sync with the parent.
Type: Boolean
Required: false
Default: true
Defines it the component should be draggable or not.
Type: Boolean
Required: false
Default: true
Defines it the component should be resizable or not.
Type: Boolean
Required: false
Default: true
Defines it the component should be rotatable or not.
Type: Number
Required: false
Default: 200
Define the initial width of the element.
Type: Number
Required: false
Default: 200
Define the initial height of the element.
Type: Number
Required: false
Default: 50
Define the minimal width of the element.
Type: Number
Required: false
Default: 50
Define the minimal height of the element.
Type: Number
Required: false
Default: 0
Define the initial angle of the element
Type: Number
Required: false
Default: 0
Define the initial x position of the element.
Type: Number
Required: false
Default: 0
Define the initial y position of the element.
Type: Array
Required: false
Default: ['n', 'e', 's', 'w', 'nw', 'ne', 'se', 'sw']
Type: String
Required: false
Default: both
Define the axis on which the element is draggable. Available values are x, y or both.
Type: Array
Required: false
Default: [1,1]
Define the grid on which the element is snapped.
Type: Boolean
Required: false
Default: false
Restricts the movement and the dimensions of the element to the parent.
Required: false
Parameters: -
Called whenever the component gets clicked, in order to show handles.
Required: false
Parameters: -
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
Required: false
Parameters:
leftthe X position of the elementtopthe Y position of the elementwidththe width of the elementheightthe height of the element
Called whenever the component gets resized.
Required: false
Parameters:
leftthe X position of the elementtopthe Y position of the elementwidththe width of the elementheightthe height of the element
Called whenever the component stops getting resized.
Required: false
Parameters:
leftthe X position of the elementtopthe Y position of the element
Called whenever the component gets dragged.
Required: false
Parameters:
leftthe X position of the elementtopthe Y position of the element
Called whenever the component stops getting dragged.
Required: false
Parameters:
anglethe angle of the element
Called whenever the component gets rotated.
Required: false
Parameters:
anglethe angle of the element
Called whenever the component stops getting rotated.