vue-drag-resize-and-rotate

1.1.2 • Public • Published

Hello World!

Latest Version on NPM Software License npm

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

Package Sidebar

Install

npm i vue-drag-resize-and-rotate

Weekly Downloads

27

Version

1.1.2

License

MIT

Unpacked Size

33.3 kB

Total Files

18

Last publish

Collaborators

  • nastuzzisamy