Vue Drag Resize And Rotate

Vue Component for draggable and resizable elements.

Table of Contents

• Features
• Install and basic usage
  • Props
  • Events
• Contributing
• License

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 left
• tm - Top middle
• tr - Top right
• mr - Middle right
• br - Bottom right
• bm - Bottom middle
• bl - Bottom left
• ml - Middle left
• ro - 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

License

MIT license