Vue 3 中怎么在拖拽排序列表中绑定拖拽开始、经过和结束的系列事件-Vue.js-PHP中文网

vue 3拖拽排序分原生api和vuedraggable两类：原生需手动管理dragstart存索引、dragover/dragenter仅.prevent、drop执行splice重排；vuedraggable推荐用于业务，用v-model绑定，@update处理排序逻辑，@end用于收尾清理。

vue 3 中怎么在拖拽排序列表中绑定拖拽开始、经过和结束的系列事件

在 Vue 3 中实现拖拽排序列表时，绑定拖拽开始、经过和结束事件，核心是围绕 HTML5 原生拖放 API（dragstart、dragover、drop 等）或封装好的第三方库（如 vuedraggable 或 SortableJS）来组织逻辑。不同方案事件名和触发时机有差异，下面分两类说明，直接对应开发场景：

原生 draggable + Vue 3 响应式逻辑

适用于轻量、可控、不依赖额外包的场景。需手动管理索引与数据重排。

@dragstart：记录被拖项索引，并设置拖拽数据

const dragIndex = ref(null);
const handleDragStart = (index) => {
  dragIndex.value = index;
  event.dataTransfer.setData('text/plain', index); // 必须设，否则 drop 可能无效
};

@dragover.prevent 和 @dragenter.prevent：仅阻止默认行为，让 drop 可触发（二者常同时加 .prevent）

注意：dragover 会高频触发（约每 100ms 一次），不能在其中做数组操作，只用于“标记可放置区域”或视觉反馈。

@drop：真正执行位置交换的时机

const handleDrop = (targetIndex) => {
  if (dragIndex.value === null || dragIndex.value === targetIndex) return;

  const item = list.value.splice(dragIndex.value, 1)[0];
  const insertIndex = dragIndex.value

✅ 关键点：dragstart 存索引、dragover/dragenter 仅 .prevent、drop 执行重排。不要用 dragend 更新数据——它不提供目标位置信息。

Vue
避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

使用 vuedraggable（推荐用于业务项目）

基于 SortableJS 封装，事件更语义化、支持嵌套/动画/跨容器等，且自动同步数据。

@start：拖拽刚开始，DOM 元素被拿起

const onStart = () => {
  console.log('拖拽已开始');
};

@move：拖拽过程中实时判断是否允许放置到某位置（返回 false 则禁止）

const onMove = (evt) => {
  // evt.draggedContext.index: 当前拖拽项原索引
  // evt.relatedContext.index: 目标位置索引（hover 的项）
  return evt.draggedContext.index !== evt.relatedContext.index;
};

@end：拖拽完全结束（无论是否发生位置变化）

const onEnd = ({ oldIndex, newIndex }) => {
  if (oldIndex !== newIndex) {
    console.log(`从 ${oldIndex} 移动到 ${newIndex}`);
    // 数据已自动更新，无需手动 splice
  }
};