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

    Install

    npm i vue-drag-resize-and-rotate

    DownloadsWeekly Downloads

    11

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    33.3 kB

    Total Files

    18

    Last publish

    Collaborators

    • nastuzzisamy