draggable-vue-directive

draggable-vue-directive

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

Installation

npm install draggable-vue-directive --save

Demo

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
• onPositionChange
• onDragEnd
• onDragStart
• resetInitialPos
• initialPosition
• stopDragging
• boundingRect
• boundingElement
• boundingRectMargin

handle

Type: HtmlElement | Vue
Required: false

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

• The simple use. Just to put the directive on any Vue component or HTML element, and…boom! The element is draggable.
• 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.