v-dragged
v-dragged
Vue directive plugin for drag event detection.
NOTE: This directive listens to the mouse/touch behavior and set a handler for when a drag action is detected. This is different from setting draggable
on element in that you need to move the element yourself according to the information v-dragged provides.
Install
npm install --save v-dragged
import Vue from 'vue'
import VDragged from 'v-dragged'
Vue.use(VDragged)
Example
<div v-dragged="onDragged"></div>
{
// ...other options omitted
methods: {
onDragged({ el, deltaX, deltaY, offsetX, offsetY, clientX, clientY, first, last }) {
if (first) {
this.dragged = true
return
}
if (last) {
this.dragged = false
return
}
var l = +window.getComputedStyle(el)['left'].slice(0, -2) || 0
var t = +window.getComputedStyle(el)['top'].slice(0, -2) || 0
el.style.left = l + deltaX + 'px'
el.style.top = t + deltaY + 'px'
}
}
}
Event Details
The argument passed to the callback function is an object containing the following properties:
el
- The target element on which the diretive binds.
- type: HTMLElement
first
- A boolean to indicate whether it is the first move of the drag. (drag starts here).
- type: Boolean
last
- A boolean to indicate whether it is the last move of the drag. (drag ends here).
- type: Boolean
deltaX
- The change of the pointer (mouse/touch)'s x coordination from the last position.
undefined
whenfirst
orlast
istrue
. - type: Number
deltaY
- The change of the pointer (mouse/touch)'s y coordination from the last position.
undefined
whenfirst
orlast
istrue
. - type: Number
offsetX
- The change of the pointer (mouse/touch)'s x coordination from the starting position.
undefined
whenfirst
orlast
istrue
. - type: Number
offsetY
- The change of the pointer (mouse/touch)'s y coordination from the starting position.
undefined
whenfirst
orlast
istrue
. - type: Number
clientX
- Current x coordination of the pointer (mouse/touch).
- type: Number
clientY
- Current y coordination of the pointer (mouse/touch).
- type: Number
Dependencies
babel-eslint: ^7.2.3babel-plugin-external-helpers: ^6.22.0babel-preset-latest: ^6.24.1eslint: ^3.19.0eslint-config-standard: ^10.2.1eslint-plugin-html: ^3.0.0eslint-plugin-import: ^2.3.0eslint-plugin-node: ^5.0.0eslint-plugin-promise: ^3.5.0eslint-plugin-standard: ^3.0.1file-loader: ^0.11.2lodash: ^4.17.4rollup: ^0.43.0rollup-plugin-babel: ^2.7.1rollup-plugin-commonjs: ^8.0.2rollup-plugin-eslint: ^3.0.0rollup-plugin-json: ^2.3.0rollup-plugin-node-resolve: ^3.0.0rollup-plugin-uglify: ^2.0.1rollup-plugin-vue: ^2.4.0rollup-watch: ^4.0.0url-loader: ^0.5.9vue: ^2.3.4