我正在构建一个日历日视图,我有可拖动事件的卡片。
我试图锻炼我如何可以检测到卡被移动到哪里,我可以检测鼠标的位置,但我需要的位置,我拖动的元素的顶部。
<script setup>
import {ref} from "vue";
import draggable from "vuedraggable";
const appointments = ref([ // appointment data ]);
function test(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="test"
>
<li>Appointment...</li>
</draggable>
</template>
字符串
1条答案
按热度按时间vc9ivgsu1#
@drag
是原生的HTML事件。你应该使用可拖动组件(https://github.com/SortableJS/vue. draggable.next#move)发出的@move
。传入的事件有以下属性(https://github.com/SortableJS/Sortable#move-event-object):HTMLElement
HTMLElement
HTMLElement
DOMRect
HTMLElement
-已引导的元素DOMRect
Boolean
-如果元素将插入到目标之后,则为true(如果在目标之前,则为false)因此,对您来说,最有用的可能是
draggedRect.x
和draggedRect.y