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

文章目录

  • 一、前言
  • [二、React 实现拖拽排序](#二、React 实现拖拽排序)
    • [2.1 使用 `react-dnd` 库](#2.1 使用 react-dnd 库)
      • [2.1.1 安装依赖](#2.1.1 安装依赖)
      • [2.1.2 创建拖拽排序组件](#2.1.2 创建拖拽排序组件)
      • [2.1.3 使用组件](#2.1.3 使用组件)
    • [2.2 样式设计](#2.2 样式设计)
  • [三、Vue 实现拖拽排序](#三、Vue 实现拖拽排序)
    • [3.1 安装依赖](#3.1 安装依赖)
    • [3.2 创建拖拽排序组件](#3.2 创建拖拽排序组件)
    • [3.3 使用组件](#3.3 使用组件)
  • 四、总结与对比

一、前言

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

二、React 实现拖拽排序

2.1 使用 react-dnd

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

2.1.1 安装依赖

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

bash 复制代码
npm install react-dnd react-dnd-html5-backend

2.1.2 创建拖拽排序组件

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

javascript 复制代码
// 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 组件传入一个数组,完成排序操作。

javascript 复制代码
// 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 样式设计

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

css 复制代码
.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 依赖。

bash 复制代码
npm install vuedraggable

3.2 创建拖拽排序组件

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

javascript 复制代码
<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 更加简单,适合一般场景。


到这里,这篇文章就和大家说再见啦!我的主页里还藏着很多 篇 前端 实战干货,感兴趣的话可以点击头像看看,说不定能找到你需要的解决方案~

创作这篇内容花了很多的功夫。如果它帮你解决了问题,或者带来了启发,欢迎:

点个赞❤️ 让更多人看到优质内容

关注「前端极客探险家」🚀 每周解锁新技巧

收藏文章⭐️ 方便随时查阅

📢 特别提醒:

转载请注明原文链接,商业合作请私信联系

感谢你的阅读!我们下篇文章再见~ 💕

相关推荐
吞掉星星的鲸鱼21 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6624 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
....49225 分钟前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript