I am using Vuedraggable Component which has a Element.
It gets draggable when click + move the mouse across the screen. After releasing the click from the mouse, I want to get a X,Y coordination where we release the mouse move position.
Here is my sample code,
<draggable class="dragArea list-group" :list="list1" @change="log">
<div
v-for="element in list1"
:key="element.name"
class="list-group-item"
>
<button class="button button--line" @change="down" @click="up">
{{ element.name }}
</button>
</div>
</draggable>
import draggable from 'vuedraggable';
export default {
name: 'test',
data: () => {
return {
list1: [{ name: 'Signature Draggable', id: 1 }],
}
},
methods: {
down(e) {
console.log('>>>>>>>>>>>>>>>>1111121');
e.target.offsetLeft - e.clientX, e.target.offsetTop - e.clientY;
},
up(event) {
console.log('###############1111121');
}
}
Kindly help me to get the X,Y Coordination.
You can use the mouse-up event(v-on:mouseup).
<template>
<div v-on:mousedown="down($event)" v-on:mouseup="up($event)" style="background-color:blue; width:500px;height:500px">
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {}
},
methods: {
up: function (e) {
console.log('X: ' + e.offsetX + ' Y: ' + e.offsetY)
},
down: function (e) {
console.log('X: ' + e.offsetX + ' Y: ' + e.offsetY)
}
}
}
</script>