Skip to content
Vue2 directive that handles drag & drop
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist adding directive strong interfaces Jan 11, 2019
src adding directive strong interfaces Jan 11, 2019
.gitattributes
.gitignore adding dist folder Feb 10, 2018
.npmignore
LICENSE.md adding license Feb 10, 2018
README.md
package-lock.json
package.json
tsconfig.json fixing merge issues May 22, 2018

README.md

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.

You can’t perform that action at this time.