Vue Draggable：如何获取被拖拽元素的位置

核心思路 #

利用DOM元素的getBoundingClientRect()方法获取被拖拽元素的位置信息，该方法会返回元素相对于视口的坐标（包括top、bottom、left、right等属性）；如果需要相对于整个页面的位置，只需加上页面的滚动距离即可。

修改后的代码实现 #

<script setup> 
import { ref } from "vue";
import draggable from "vuedraggable";

const appointments = ref([/* 你的预约数据 */]);

function test(event) {
  // 确保获取到的是拖拽的li元素（避免点击到子元素的情况）
  const draggedElement = event.target.closest('li');
  if (!draggedElement) return;

  // 获取元素相对于视口的位置信息
  const rect = draggedElement.getBoundingClientRect();
  
  // 元素顶部相对于视口的位置
  const elementTopViewport = rect.top;
  console.log('拖拽元素顶部（视口）：', elementTopViewport);

  // 元素顶部相对于整个页面的位置（加上滚动距离）
  const elementTopPage = rect.top + window.scrollY;
  console.log('拖拽元素顶部（页面）：', elementTopPage);
}
</script>

<template>
  <draggable
    v-model="appointments"
    tag="ol"
    @drag="test"
  >
    <li v-for="item in appointments" :key="item.id">
      {{ item.title }} <!-- 示例：显示预约标题 -->
    </li>
  </draggable>
</template>

关键说明 #

• closest('li')：确保我们获取到的是最外层的预约卡片元素，避免因点击卡片内的子元素导致target指向错误。
• getBoundingClientRect().top：返回元素顶部距离浏览器视口顶部的像素值。
• window.scrollY：获取当前页面垂直方向的滚动距离，将其与rect.top相加即可得到元素相对于整个文档顶部的位置。

内容的提问来源于stack exchange，提问作者Shaun