vue2-dragged
A simple Vue 2 directive plugin for drag event detection
Direct include
Simply include vue2-dragged
after Vue and it will install itself automatically:
CDN
NPM
npm install vue2-dragged --save
When used with a module system, you must explicitly install the component via Vue.use()
:
Vue
You don't need to do this when using global script tags.
Nuxt.js
npm install vue2-dragged --save
When create file plugins/vue2-dragged.js
:
Vue
Then, add the file inside the plugins
key of nuxt.config.js
:
moduleexports = //... plugins: '~/plugins/vue2-dragged' //...
Event
The argument passed to the event handler is an object containing the following properties:
el
- The target element on which the directive 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 coordinate from the last position.
It isundefined
whenfirst
orlast
istrue
. - type: Number
deltaY
- The change of the pointer (mouse/touch)'s y coordinate from the last position.
It isundefined
whenfirst
orlast
istrue
. - type: Number
offsetX
- The change of the pointer (mouse/touch)'s x coordinate from the starting position.
It isundefined
whenfirst
orlast
istrue
. - type: Number
offsetY
- The change of the pointer (mouse/touch)'s y coordinate from the starting position.
It isundefined
whenfirst
orlast
istrue
. - type: Number
clientX
- Current x coordinate of the pointer (mouse/touch).
- type: Number
clientY
- Current y coordinate of the pointer (mouse/touch).
- type: Number
Sample
<template> <div id="app"> <img class="image" :src="image" v-dragged="onDragged" /> </div></template> <script>export default { name: "App", data() { return { image: "https://picsum.photos/id/237/300" }; }, methods: { onDragged({ el, deltaX, deltaY }) { const { left, top } = window.getComputedStyle(el); el.style.left = parseFloat(left) + deltaX + "px"; el.style.top = parseFloat(top) + deltaY + "px"; } }};</script> <style lang="scss" scoped>#app { .image { position: absolute; }}</style>
Contributing
If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.