vdrr v2.5.0
Vue Component for draggable and resizable elements.
Table of Contents
Demo
Not available for now
Features
- A lightweight, no-dependency
- All props are reactive
- Support touch events
- Use
- draggable
- resizable
- rotable
- or all of them
- Define sticks for resizing
- Define sticks for rotation
- Restrict size and movement to parent element
- Restrict drag to vertical or horizontal axis
- Handle draggable areas
- Resizable and draggable even with a defined angle
Install and basic usage
$ npm i -s vue-drag-resize-and-rotate
Register the component:
import Vue from 'vue'
import VDRR from 'vdrr'
Vue.component('VDRR', vdrr)
Use the component:
<template>
<div id="app">
<VDRR :active="true" :w="200" :h="200" @resizing="change" @dragging="change" @rotating="change" :rotate="true">
<h3>Hello World!</h3>
<p>{{ y }} х {{ x }} </p>
<p>{{ w }} х {{ h }}</p>
</VDRR>
</div>
</template>
<script>
import VDRR from 'vdrr';
export default {
name: 'app',
components: {
VDRR
},
data() {
return {
w: 0,
h: 0,
x: 0,
y: 0,
}
},
methods: {
change(newRect) {
this.w = newRect.w;
this.h = newRect.h;
this.x = newRect.x;
this.y = newRect.y;
}
}
}
</script>
Props
active
Type: Boolean
Required: false
Default: false
Determines whether the component should be active.
<VDRR :active="true">
draggable
Type: Boolean
Required: false
Default: true
Determines whether the component should be draggable.
<VDRR :draggable="false">
resizable
Type: Boolean
Required: false
Default: true
Determines whether the component should be resizable.
<VDRR :resizable="false">
grid
Type: Array
Required: false
Default: [0, 0]
Determines pixel distance beetween each drag
<VDRR :grid="[10, 10]">
bounds
Type: Object
Required: false
Default: undefined
Limits the scope of the component's change to its parent size. Variable parameters can be set (none of them are required):
- parent:
Boolean
- top:
Number
- right:
Number
- bottom:
Number
- left:
Number
<VDRR :bounds="{parent: true}">
<VDRR :bounds="{top: -100, bottom: 100}">
<VDRR :bounds="{top: -100, right: 100, bottom: 100, left: -100}">
w
Type: Number
Required: false
Default: 200
Define the initial width of the component.
<VDRR :w="500">
h
Type: Number
Required: false
Default: 200
Define the initial height of the component.
<VDRR :h="500">
x
Type: Number
Required: false
Default: 0
Define the initial x position of the component.
<VDRR :x="500">
y
Type: Number
Required: false
Default: 0
Define the initial y position of the component.
<VDRR :y="500">
r
Type: Number
Required: false
Default: 0
Define the initial rotation angle in degrees of the component.
<VDRR :r="45">
sticks
Type: Array
Required: false
Default: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml', 'ro']
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 leftro
- Rotation stick
<VDRR :sticks="['tm','bm','ml','mr']">
<VDRR :sticks="['ro']">
axis
Type: String
Required: false
Default: xy
Define the axis on which the element is draggable. Available values are x
, y
, xy
. Other values are equivalent to none
<VDRR axis="x">
dragHandle
Type: String
Required: false
Default: undefined
Defines the selector that should be used to drag the component.
<VDRR dragHandle=".drag">
dragCancel
Type: String
Required: false
Default: undefined
Defines a selector that should be used to prevent drag initialization.
<VDRR dragCancel=".drag">
dragCancel
Type: String
Required: false
Default: undefined
Defines a selector that should be used to prevent drag initialization.
<VDRR dragCancel=".drag">
Events
clicked
Required: false
Parameters: -
Called whenever the component gets clicked.
<VDRR @activated="onActivated">
activated
Required: false
Parameters: -
Called whenever the component gets clicked, in order to show handles.
<VDRR @activated="onActivated">
deactivated
Required: false
Parameters: -
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
<VDRR @deactivated="onDeactivated">
resizeStart
Required: false
Parameters: object
{
x: Number, //the X position of the component
y: Number, //the Y position of the component
w: Number, //the width of the component
h: Number, //the height of the component
r: Number, // the deg of the component
index: Number, // the index of the component
type: String // the type of the component
}
Called whenever the component gets resized.
<VDRR @resizeStart="onResizing">
resizeStop
Required: false
Parameters: object
{
x: Number, //the X position of the component
y: Number, //the Y position of the component
w: Number, //the width of the component
h: Number, //the height of the component
r: Number, // the deg of the component
index: Number, // the index of the component
type: String // the type of the component
}
Called whenever the component stops getting resized.
<VDRR @resizeStop="onResizstop">
dragStart
Required: false
Parameters: object
{
x: Number, //the X position of the component
y: Number, //the Y position of the component
w: Number, //the width of the component
h: Number, //the height of the component
r: Number, // the deg of the component
index: Number, // the index of the component
type: String // the type of the component
}
Called whenever the component gets dragged.
<VDRR @dragStart="onDragging">
dragStop
Required: false
Parameters: object
{
x: Number, //the X position of the component
y: Number, //the Y position of the component
w: Number, //the width of the component
h: Number, //the height of the component
r: Number, // the deg of the component
index: Number, // the index of the component
type: String // the type of the component
}
Called whenever the component stops getting dragged.
<VDRR @dragStop="onDragstop">
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:8081
npm run start
# distribution build
npm run build