Vue Draggable 中获取拖拽元素的实时位置坐标-js教程-PHP中文网

Vue Draggable 中获取拖拽元素的实时位置坐标

在 Vue Draggable 中，应使用 @move 事件（而非原生 @drag）获取拖拽中元素的精确位置；事件对象中的 draggedRect 属性提供了包含 x、y、top、left 等字段的 DOMRect 对象，可直接用于定位计算。

在 vue draggable 中，应使用 `@move` 事件（而非原生 `@drag`）获取拖拽中元素的精确位置；事件对象中的 `draggedrect` 属性提供了包含 `x`、`y`、`top`、`left` 等字段的 domrect 对象，可直接用于定位计算。

Vue Draggable（基于 SortableJS）为拖拽交互提供了语义化、组件级的事件系统。与原生 DOM 的 drag 事件不同，@drag 在该组件中实际绑定的是浏览器原生拖放事件（dragstart/drag），它不提供被拖元素在页面中的实时几何信息，仅能访问鼠标坐标（如 clientY），无法准确反映元素自身的位置——尤其在滚动容器、缩放或复杂布局下极易失准。

正确做法是监听组件自定义的 @move 事件。该事件在拖拽过程中高频触发，其回调参数是一个结构化的 MoveEvent 对象，关键属性包括：

dragged: 当前正在拖拽的 DOM 元素（HTMLElement）
draggedRect: 该元素当前的布局矩形（DOMRect），含 x, y, top, left, width, height, bottom, right 等只读属性
to / from: 目标与源列表容器元素
related / relatedRect: 当前悬停/吸附的目标元素及其位置

因此，若需获取拖拽卡片顶部边缘在视口中的 Y 坐标（例如用于日历时间轴对齐判断），应直接读取 event.draggedRect.top 或 event.draggedRect.y：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

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

const appointments = ref([
  { id: 1, title: 'Meeting', time: '09:00' },
  { id: 2, title: 'Lunch', time: '12:30' }
])

function onDragMove(event) {
  // ✅ 正确：获取拖拽元素上边缘在视口中的绝对 Y 坐标
  const topPosition = event.draggedRect.top
  console.log('Dragged element top (viewport Y):', topPosition)

  // ✅ 同样有效：x/y 是 left/top 的别名（CSS 逻辑坐标）
  console.log('X:', event.draggedRect.x, 'Y:', event.draggedRect.y)

  // ✅ 获取完整尺寸信息，便于边界检测
  console.log('Width:', event.draggedRect.width, 'Height:', event.draggedRect.height)
}
</script><template><div class="calendar-day">
    <draggable v-model="appointments" tag="ol" item-key="id">
    >
      <template element><li class="appointment-card">{{ element.title }}</li>
      </template></draggable>
</div>
</template>

⚠️ 注意事项：

@move 事件仅在拖拽过程中持续触发，当拖拽结束（释放）时会触发 @end，此时 draggedRect 仍有效，但不再更新；
draggedRect 基于 getBoundingClientRect()，返回的是相对于视口（viewport） 的坐标，若需文档坐标（如配合 document.elementFromPoint），可结合 window.scrollY 补偿：event.draggedRect.top + window.scrollY；
确保 draggable 组件已正确安装并注册（Vue 3 + <script setup></script> 下推荐使用 vuedraggable@next）；
若需高性能监听（如每帧计算），注意避免在 @move 中执行重绘操作或复杂逻辑，必要时可用 requestAnimationFrame 节流。