Estoy usando el componente Vuedraggable que tiene un elemento.
Se puede arrastrar al hacer clic y mover el mouse por la pantalla. Después de soltar el clic del mouse, quiero obtener una coordinación X,Y donde soltamos la posición de movimiento del mouse.
Aquí está mi código de muestra,
<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'); } }Amablemente ayúdame a obtener la coordinación X,Y.
Puede usar el evento mouse-up ( 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>