在前端开发的世界里，拖拽改变元素顺序的需求无处不在。无论是在实现可视化排序、表格调整，还是拖拽组件管理等方面，它都能大大提升用户的交互体验。今天，我们将基于Vue 3，不依赖任何第三方库，来实现一个简单而高效的拖拽排序功能。

一、引言

想象一下，在一个电商平台上，用户可以随意拖拽商品到不同的分类区域，或者将商品拖拽到购物车中。这种直观的交互方式无疑会大大提高用户的购买意愿。那么，如何实现这样的拖拽排序呢？

二、Vue 3 实现拖拽排序

首先，我们需要创建一个可拖拽的列表，并为其添加相应的事件监听器。这里我们以el-tag标签为例，展示如何实现拖拽排序。

<template>
  <div>
    <el-tag
      v-for="(item, i) in selectRows"
      :key="i"
      type="primary"
      @dragstart="dragstart($event, i)"
      @dragenter="dragenter($event, i)"
      @dragover="dragover($event, i)"
      draggable="true"
      @dragend="dragEnd"
    >
      {{ item.name }}
    </el-tag>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectRows = ref([]);

    let startIndex = null;
    let endIndex = null;

    const dragstart = (e, index) => {
      startIndex = index;
    };

    const dragenter = (e, index) => {
      endIndex = index;
    };

    const dragover = (e, index) => {
      e.preventDefault();
    };

    const dragEnd = () => {
      if (startIndex !== endIndex) {
        const fifthItem = selectRows.value.splice(startIndex, 1)[0];
        selectRows.value.splice(endIndex, 0, fifthItem);
      }
    };

    return {
      selectRows,
      dragstart,
      dragenter,
      dragover,
      dragEnd,
    };
  },
};
</script>

三、拖拽排序的核心思路

实现拖拽排序的核心思路如下：

1. 鼠标按下时记录拖拽元素的起始位置：通过@dragstart事件监听器，获取拖拽元素的索引。

2. 拖拽过程中实时追踪位置变化：通过@dragover事件监听器，阻止默认行为，并在拖拽过程中更新元素的位置信息。

3. 松开鼠标时，将元素放置到新的位置，并同步数据数组顺序：通过@dragend事件监听器，将拖拽元素从原位置移除，并插入到新的位置，同时更新数据数组的顺序。

四、注意事项

在实现拖拽排序时，需要注意以下几点：

1. 防止默认行为：在@dragover事件中，需要调用e.preventDefault()方法，以防止浏览器默认的拖放行为。

2. 处理拖拽结束后的逻辑：在@dragend事件中，需要处理拖拽结束后的逻辑，包括移除原位置的元素和插入新位置的元素。

3. 兼容性考虑：在实际项目中，可能需要考虑不同浏览器的兼容性问题，确保拖拽功能的正常运行。

五、结语

通过以上步骤，我们可以在Vue 3中轻松实现拖拽排序功能。这种方法不仅简单易行，而且不需要依赖任何第三方库，非常适合对DOM操作有更多自定义需求的场景。希望这篇文章能为你带来一些启发和帮助！