如何实现一个支持拖拽排序的组件：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 更加简单，适合一般场景。

---

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