I am currently developing a calendar day view, and I have implemented draggable cards for events.
My current challenge is figuring out how to determine the destination of the card being moved. I can easily detect the mouse position, but what I really need is the top position of the element I am dragging.
<script setup>
import {ref} from "vue";
import draggable from "vuedraggable";
const appointments = ref([ // appointment data ]);
function findTopPosition(event) {
console.log(event)
console.log('ClientY = ' + event.clientY);
console.log('PageY = ' + event.pageY);
console.log('ScreenY = ' + event.screenY);
console.log('LayerY = ' + event.layerY);
console.log('OffsetY = ' + event.offsetY);
}
</script>
<template>
<draggable
v-model="appointments"
tag="ol"
@drag="findTopPosition"
>
<li>Appointment...</li>
</draggable>
</template>