National Palace Museum

    draggable-vue-directive
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    draggable-vue-directive

    GitHub open issues npm download npm download per month npm version Package Quality vue2 MIT License

    Vue directive (Vue.js 2.x) for handling element drag & drop.

    Installation

    npm install draggable-vue-directive --save

    Demo

    demo gif

    You can view the live demo here: https://israelzablianov.github.io/draggable-demo

    Examples

    Without Handler

    <div v-draggable>
        classic draggable
    </div>

    .vue file:

      import { Draggable } from 'draggable-vue-directive'
      ...
      export default {
            directives: {
                Draggable,
            },
      ...

    With Handler

    <div v-draggable="draggableValue">
        <div :ref="handleId">
            <img src="../assets/move.svg" alt="move">
        </div>
        drag and drop using handler
    </div>

    .vue file:

      import { Draggable } from 'draggable-vue-directive'
      ...
      export default {
            directives: {
                Draggable,
            },
            data() {
                return {
                    handleId: "handle-id",
                    draggableValue: {
                        handle: undefined
                    }
                };
            },
            mounted() {
                this.draggableValue.handle = this.$refs[this.handleId];
            }
      ...

    draggable Value

    The object passed to the directive is called the directive’s value.
    For example, in v-draggable="draggableValue", draggableValue can be an object containing the folowing fields:

    handle

    Type: HtmlElement | Vue
    Required: false

    There are two ways to use the draggable directive, as shown in the demo above.

    1. The simple use. Just to put the directive on any Vue component or HTML element, and…boom! The element is draggable.
    2. Using a handler. If you choose to use a handler, the component itself will only be draggable using the handler.

    onPositionChange

    Type: Function
    Required: false

    Sometimes you need to know the element’s coordinates while it’s being dragged.
    Passing a callback to draggableValue will achieve this goal; while dragging the element, the callback will be executed with 3 params:

    • positionDiff
    • absolutePosition (the current position; the first time the directive is added to the DOM or being initialized, the value will be undefined, unless the element has left and top values)
    • event (the event object)
      import { Draggable } from 'draggable-vue-directive'
      ...
      export default {
            directives: {
                Draggable,
            },
            data() {
                return {
                    draggableValue: {
                        onPositionChange: this.onPosChanged
                    }
                };
            },
            methods: {
                onPosChanged: function(positionDiff, absolutePosition, event) {
                    console.log("left corner", absolutePosition.left);
                    console.log("top corner", absolutePosition.top);
                }
            }
      ...

    onDragEnd

    Type: Function
    Required: false

    Emits only when dragging ends. Has the same functionality as onPositionChange.

    onDragStart

    Type: Function
    Required: false

    Emits only when dragging starts. Has the same functionality as onPositionChange.

    resetInitialPos

    Type: Boolean
    Required: false
    default: undefined

    Returns to the initial position of the element, before it is mounted.

    initialPosition

    Type: Position
    Required: false
    default: undefined

    Sets the absolute starting position of this element.
    Will be applied when resetInitialPos is true.

    stopDragging

    Type: Boolean
    Required: false
    default: undefined

    Immediately stop dragging.

    boundingRect

    Type: ClientRect
    Required: false
    default: undefined

    Constrains dragging to within the bounds of the rectangle.

    boundingElement

    Type: HtmlElement
    Required: false
    default: undefined

    Constrains dragging to within the bounds of the element.

    boundingRectMargin

    Type: MarginOptions
    Required: false
    default: undefined

    When using boundingRect or boundingElement, you can pass an object with top, left, bottom, and right properties, to define a margin between the elements and the boundaries.

    Install

    npm i draggable-vue-directive

    DownloadsWeekly Downloads

    1,502

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    26.5 kB

    Total Files

    11

    Last publish

    Collaborators

    • israel-zablianov