Vue Draggable -如何获取被拖动元素的位置

1hdlvixo  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(308)

我正在构建一个日历日视图,我有可拖动事件的卡片。
我试图锻炼我如何可以检测到卡被移动到哪里,我可以检测鼠标的位置,但我需要的位置,我拖动的元素的顶部。

<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>

字符串

vc9ivgsu

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-已引导的元素
  • RelatedRect:DOMRect
  • willInsertAfter:Boolean-如果元素将插入到目标之后,则为true(如果在目标之前,则为false)

因此,对您来说,最有用的可能是draggedRect.xdraggedRect.y

相关问题