Vue directive (Vue.js 2.x) for handling element drag & drop.
npm install draggable-vue-directive --save
The live demo can be found in https://israelzablianov.github.io/draggable-demo
<div v-draggable>
classic draggable
</div>.vue file:
import { Draggable } from 'draggable-vue-directive'
...
export default {
directives: {
Draggable,
},
...<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];
}
...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
- onDragEnd
- onDragStart
- resetInitialPos
- initialPosition
- stopDragging
- boundingRect
- boundingElement
- boundingRectMargin
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.
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);
}
}
...Type: Function
Required: false
Emits only when draging ended, has the same functionality as onPositionChange.
Type: Function
Required: false
Emits only when draging started, has the same functionality as onPositionChange.
Type: Boolean
Required: false
default: undefined
Returns to the initial position the element was before mounted.
Type: Position
Required: false
default: undefined
Sets the absolute starting position of this element.
Will be applied when resetInitialPos is true.
Type: Boolean
Required: false
default: undefined
Immediately stop dragging.
Type: ClientRect
Required: false
default: undefined
Constrains dragging to within the bounds of the rectangle.
Type: HtmlElement
Required: false
default: undefined
Constrains dragging to within the bounds of the element.
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.