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

The live demo can be found in https://israelzablianov.github.io/draggable-demo

Typical use:

<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 value.
For example in v-draggable="draggableValue" draggableValue can be an object containing the folowing fields:

• handle
• onPositionChange
• resetInitialPos
• initialPosition
• stopDragging
• boundingRect
• boundingElement
• boundingRectMargin

handle

Type: HtmlElement | Vue
Required: false

There are two ways to use the draggable-vue-directive as showen in the demo above.
The simple use is just to put the directive on any Vue component or Html element and boom! the element is draggable.
The second option is to use handler. if you choose to use handler, the component itself will be draggable only using the handler.

onPositionChange

Type: Function
Required: false

In some cases it is useful to know the coordinates of the element when it's been dragged.
Passing a callback to draggableValue will achieve this goal and every time the element is being dragged the callback will be executed with 3 params: positionDiff, absolutePosition (the current position, the first time the directive added to the DOM or being initialized, the value will be undefined unless the element has left and top values), event.

  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);
            }
        }
  ...

resetInitialPos

Type: Boolean
Required: false
default: undefined

Returns to the initial position the element was before 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, right properties, to define a margin between the elements and the boundries.