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 VueDragResizeAndRotate from 'vue-drag-resize-and-rotate'

Vue.component('vue-drag-resize-and-rotate', VueDragResizeAndRotate)

Use the component:

<template>
    <div id="app">
        <VueDragResizeAndRotate :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>
        </VueDragResizeAndRotate>
    </div>
</template>

<script>
    import VueDragResizeAndRotate from 'vue-drag-resize-and-rotate';

    export default {
        name: 'app',

        components: {
            VueDragResizeAndRotate
        },

        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.

<VueDragResizeAndRotate :active="true">

draggable

Type: Boolean
Required: false
Default: true

Determines whether the component should be draggable.

<VueDragResizeAndRotate :draggable="false">

resizable

Type: Boolean
Required: false
Default: true

Determines whether the component should be resizable.

<VueDragResizeAndRotate :resizable="false">

grid

Type: Array
Required: false
Default: [0, 0]

Determines pixel distance beetween each drag

<VueDragResizeAndRotate :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

<VueDragResizeAndRotate :bounds="{parent: true}">
<VueDragResizeAndRotate :bounds="{top: -100, bottom: 100}">
<VueDragResizeAndRotate :bounds="{top: -100, right: 100, bottom: 100, left: -100}">

w

Type: Number
Required: false
Default: 200

Define the initial width of the component.

<VueDragResizeAndRotate :w="500">

h

Type: Number
Required: false
Default: 200

Define the initial height of the component.

<VueDragResizeAndRotate :h="500">

x

Type: Number
Required: false
Default: 0

Define the initial x position of the component.

<VueDragResizeAndRotate :x="500">

y

Type: Number
Required: false
Default: 0

Define the initial y position of the component.

<VueDragResizeAndRotate :y="500">

r

Type: Number
Required: false
Default: 0

Define the initial rotation angle in degrees of the component.

<VueDragResizeAndRotate :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

<VueDragResizeAndRotate :sticks="['tm','bm','ml','mr']">
<VueDragResizeAndRotate :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

<VueDragResizeAndRotate axis="x">

dragHandle

Type: String
Required: false
Default: undefined

Defines the selector that should be used to drag the component.

<VueDragResizeAndRotate dragHandle=".drag">

dragCancel

Type: String
Required: false
Default: undefined

Defines a selector that should be used to prevent drag initialization.

<VueDragResizeAndRotate dragCancel=".drag">

dragCancel

Type: String
Required: false
Default: undefined

Defines a selector that should be used to prevent drag initialization.

<VueDragResizeAndRotate dragCancel=".drag">

---

Events

clicked

Required: false
Parameters: -

Called whenever the component gets clicked.

<VueDragResizeAndRotate @activated="onActivated">

activated

Required: false
Parameters: -

Called whenever the component gets clicked, in order to show handles.

<VueDragResizeAndRotate @activated="onActivated">

deactivated

Required: false
Parameters: -

Called whenever the user clicks anywhere outside the component, in order to deactivate it.

<VueDragResizeAndRotate @deactivated="onDeactivated">

resizing

Required: false
Parameters: object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component gets resized.

<VueDragResizeAndRotate @resizing="onResizing">

resizestop

Required: false
Parameters: object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component stops getting resized.

<VueDragResizeAndRotate @resizestop="onResizstop">

dragging

Required: false
Parameters: object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component gets dragged.

<VueDragResizeAndRotate @dragging="onDragging">

dragstop

Required: false
Parameters: object

{
    left: Number, //the X position of the component
    top: Number, //the Y position of the component
    width: Number, //the width of the component
    height: Number //the height of the component
}

Called whenever the component stops getting dragged.

<VueDragResizeAndRotate @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