如何实现一个支持拖拽排序的组件：React 和 Vue 版

一、前言

拖拽排序是现代网页应用中常见的交互效果，广泛应用于任务管理、项目看板、图片排序等功能中。实现一个灵活且高效的拖拽排序组件，可以大大提升用户体验。在这篇文章中，我们将分别介绍如何使用 React 和 Vue 实现拖拽排序功能。

二、React 实现拖拽排序

2.1 使用 react-dnd 库

在 React 中实现拖拽排序，我们可以使用 react-dnd 这一流行的库，它基于 HTML5 拖拽 API，并提供了很多拖拽交互的自定义选项。

2.1.1 安装依赖

首先，我们需要安装 react-dnd 和 react-dnd-html5-backend 这两个依赖。

npm install react-dnd react-dnd-html5-backend

2.1.2 创建拖拽排序组件

接下来，我们创建一个简单的拖拽排序组件 DraggableList，包含可拖拽的列表项。

// DraggableList.js
import React, { useState } from 'react';
import { useDrag, useDrop } from 'react-dnd';const ItemType = 'ITEM';const DraggableItem = ({ item, index, moveItem }) => {const [, drag] = useDrag({type: ItemType,item: { index },});const [, drop] = useDrop({accept: ItemType,hover: (draggedItem) => {if (draggedItem.index !== index) {moveItem(draggedItem.index, index);draggedItem.index = index;}},});return (<div ref={(node) => drag(drop(node))} className="draggable-item">{item}</div>);
};const DraggableList = ({ items }) => {const [list, setList] = useState(items);const moveItem = (fromIndex, toIndex) => {const updatedList = [...list];const [movedItem] = updatedList.splice(fromIndex, 1);updatedList.splice(toIndex, 0, movedItem);setList(updatedList);};return (<div className="draggable-list">{list.map((item, index) => (<DraggableItem key={index} index={index} item={item} moveItem={moveItem} />))}</div>);
};export default DraggableList;

2.1.3 使用组件

在应用中，我们可以将 DraggableList 组件传入一个数组，完成排序操作。

// App.js
import React from 'react';
import DraggableList from './DraggableList';const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];function App() {return (<div className="App"><h1>React Drag and Drop</h1><DraggableList items={items} /></div>);
}export default App;

2.2 样式设计

为了提升拖拽体验，我们为拖拽的项添加了一些简单的样式：

.draggable-list {width: 300px;margin: 0 auto;
}.draggable-item {padding: 10px;margin: 5px 0;background-color: #f1f1f1;border-radius: 4px;cursor: move;
}.draggable-item:active {background-color: #ddd;
}

三、Vue 实现拖拽排序

在 Vue 中，我们可以使用 vuedraggable 库来实现拖拽排序，vuedraggable 基于 Sortable.js，是一款专门用于 Vue 的拖拽排序插件。

3.1 安装依赖

首先，我们需要安装 vuedraggable 依赖。

npm install vuedraggable

3.2 创建拖拽排序组件

在 Vue 中实现拖拽排序非常简单，只需要将 vuedraggable 用作一个包装组件即可。

<template><div class="draggable-list"><draggable v-model="list" class="list" :options="dragOptions"><div v-for="(item, index) in list" :key="index" class="draggable-item">{{ item }}</div></draggable></div>
</template><script>
import draggable from 'vuedraggable';export default {components: {draggable,},data() {return {list: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],dragOptions: {animation: 200, // 设置拖拽时的过渡动画ghostClass: 'ghost', // 拖拽过程中拖动项的样式},};},
};
</script><style scoped>
.draggable-list {width: 300px;margin: 0 auto;
}.draggable-item {padding: 10px;margin: 5px 0;background-color: #f1f1f1;border-radius: 4px;cursor: move;
}.ghost {opacity: 0.4;
}
</style>

3.3 使用组件

在应用中直接使用 draggable 组件，并通过 v-model 绑定列表数据，实现拖拽排序。

四、总结与对比

• React：通过 react-dnd 实现了更加灵活的拖拽排序功能，支持复杂的拖拽交互（例如，支持排序项的交换、多个拖拽目标等）。
• Vue：使用 vuedraggable 库，通过 Sortable.js 封装实现了简洁易用的拖拽排序，适合快速开发和常见的拖拽排序需求。

两者的实现方式都各有优缺点：React 的 react-dnd 更加灵活，适合复杂的拖拽交互，而 Vue 的 vuedraggable 更加简单，适合一般场景。

---

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕