A simple Vue 2 directive plugin for drag event detection
Simply include vue2-dragged
after Vue and it will install itself automatically:
<script src="vue.min.js"></script>
<script src="vue2-dragged.umd.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-dragged"></script>
npm install vue2-dragged --save
When used with a module system, you must explicitly install the component via Vue.use()
:
import Vue from 'vue'
import VueDragged from 'vue2-dragged'
Vue.use(VueDragged)
You don't need to do this when using global script tags.
npm install vue2-dragged --save
When create file plugins/vue2-dragged.js
:
import Vue from 'vue'
import VueDragged from 'vue2-dragged'
Vue.use(VueDragged)
Then, add the file inside the plugins
key of nuxt.config.js
:
module.exports = {
//...
plugins: [
'~/plugins/vue2-dragged'
],
//...
}
The argument passed to the event handler is an object containing the following properties:
- The target element on which the directive binds.
- type: HTMLElement
- A boolean to indicate whether it is the first move of the drag. (drag starts here).
- type: Boolean
- A boolean to indicate whether it is the last move of the drag. (drag ends here).
- type: Boolean
- The change of the pointer (mouse/touch)'s x coordinate from the last position.
It isundefined
whenfirst
orlast
istrue
. - type: Number
- The change of the pointer (mouse/touch)'s y coordinate from the last position.
It isundefined
whenfirst
orlast
istrue
. - type: Number
- The change of the pointer (mouse/touch)'s x coordinate from the starting position.
It isundefined
whenfirst
orlast
istrue
. - type: Number
- The change of the pointer (mouse/touch)'s y coordinate from the starting position.
It isundefined
whenfirst
orlast
istrue
. - type: Number
- Current x coordinate of the pointer (mouse/touch).
- type: Number
- Current y coordinate of the pointer (mouse/touch).
- type: Number
<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>
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.