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>
    <ul>
      <li
        v-for="(question, index) in questions"
        :key="question.id"
        draggable="true"
        @dragstart="dragStart(index)"
        @dragover="allowDrop"
        @drop="drop(index)"
        class="draggable-item"
      >
        {{ question.text }}
      </li>
    </ul>
  </div>
</template>

3. 方法实现

接下来，我们需要实现dragStart、allowDrop和drop这三个方法。

• dragStart：当拖拽开始时，记录被拖拽元素的索引。
• allowDrop：阻止默认处理（即阻止元素在放置时打开为链接），这是实现拖拽排序的关键。
• drop：处理放置操作，将被拖拽的元素从其原始位置移除并插入到新位置。

<script setup>
// ...（省略数据定义）

const dragStart = index => {
  draggingIndex.value = index;
};

const allowDrop = e => {
  e.preventDefault();
};

const drop = index => {
  const draggedItem = questions.value.splice(draggingIndex.value, 1)[0];
  questions.value.splice(index, 0, draggedItem);
  draggingIndex.value = -1;
};
</script>

4. 样式

最后，我们为拖拽项添加一些基本的样式，使其看起来更美观且易于操作。

<style scoped>
.draggable-item {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  cursor: move;
  background-color: #f9f9f9;
}
</style>

5. 完整示例代码

<template>
    <div>
      <ul>
        <li
          v-for="(question, index) in questions"
          :key="question.id"
          draggable="true"
          @dragstart="dragStart(index)"
          @dragover="allowDrop"
          @drop="drop(index)"
          class="draggable-item"
        >
          {{ question.text }}
        </li>
      </ul>
    </div>
  </template>
  
  <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); // 被拖拽元素的索引
  
  // 拖拽开始
  const dragStart = index => {
    draggingIndex.value = index;
  };
  
  // 允许放置
  const allowDrop = e => {
    e.preventDefault();
  };
  
  // 放置
  const drop = index => {
    const draggedItem = questions.value.splice(draggingIndex.value, 1)[0]; // 移除被拖拽的元素
    questions.value.splice(index, 0, draggedItem); // 将被拖拽的元素插入到新位置
    draggingIndex.value = -1; // 重置被拖拽元素的索引
  };
  </script>
  
  <style scoped>
  .draggable-item {
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
    cursor: move;
    background-color: #f9f9f9;
  }
  </style>

总结

通过以上步骤，我们成功在Vue 3中实现了一个简单的拖拽排序功能。Vue的响应式系统和组件化特性使得这样的功能实现起来既直观又高效。你可以根据项目的具体需求，进一步扩展和定制这个Demo，比如添加动画效果、处理错误情况等。希望这篇文章对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言。