Vue 3 中的拖拽排序功能实现

Vue 3 中的拖拽排序功能实现

在Web开发中，拖拽排序是一个常见且实用的功能，它允许用户通过拖动元素来重新排列它们的位置。Vue 3，作为现代JavaScript框架的佼佼者，提供了强大的响应式系统和组件化开发能力，使得实现这样的功能变得既简单又高效。今天，我们将通过一个简单的Vue 3 Demo来演示如何实现拖拽排序功能。

---

效果如下：

---

准备工作

首先，确保你已经安装了Vue 3环境。你可以使用Vue CLI、Vite或其他现代前端构建工具来搭建项目。在这个Demo中，我们将直接在一个Vue组件中实现拖拽排序功能。

实现步骤

1. 定义数据

在Vue组件的<script setup>部分，我们首先需要定义一组问题和一个用于记录当前被拖拽元素索引的响应式引用。

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

const questions = ref([
  {
    id: 1, text: '问题 1' },
  {
    id: 2, text: '问题 2' },
  {
    id: 3, text: '问题 3' },
  {
    id: 4, text: '问题 4' }
]);

const draggingIndex = ref(-1); // 被拖拽元素的索引
</script>

2. 模板部分

在模板中，我们使用v-for指令来渲染问题列表，并为每个列表项添加拖拽相关的事件监听器和属性。

<template>
  <div>