react-dnd实现拖拽排序

已于 2023-03-06 16:58:05 修改
阅读量1.9k 收藏 6
点赞数 3
分类专栏： 前端框架系列 文章标签： react.js javascript 前端
于 2023-03-02 15:47:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyu_ya/article/details/129298692
版权

最近开发一个审批流系统，其中会用到拖拽工具来实现动态表单，就专门研究了一下react-dnd，好了废话不多今入主题

先看最终结果图, 删除功能等等，都可以自己去配置很简单

一、基础操作

 （1） 配置需要的包

npm i react-dnd 
npm i react-dnd-html5-backend

 这里我们只做pc的 ，只需要用 react-dnd-html5-backend

react-dnd-html5-backend : 用于控制html5事件的backend

react-dnd-touch-backend : 用于控制移动端touch事件的backend

 （2）引入使用实现拖拽功能

  首先引入并包裹组件 （注意：只有被包裹的组件才能有拖拽的功能）

 根组件

import React from 'react';
import styles from './index.module.less';
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import Drag from './components/Drag';
//要使用的数据
const listData = [
    {
        title: "文本框",
    },
    {
        title: "数字框",
    },
    {
        title: "选择框",
    },
]
const Home = () => {
    
    const renderList = (data: any) => data.map((item: any, index: any) => <Drag item={item} index={index} />)
    return (
        <DndProvider backend={HTML5Backend}>
            <div className={styles.container}>
                {/*  列表 */}
                <div className={styles.list}>
                    {renderList(listData)}
                </div>
                {/* 放置的盒子 */}
                <div className={styles.box}>

                </div>
            </div>
        </DndProvider>
    )
}

export default Home

Drag  组件


useDrag  方法返回一个数组： 第一个参数接收的是collect 收集的信息，第二个参数接收时Drag 方法，通过ref 可以让你的组件有拖拽的功能

item：当前拖拽元素携带的数据

collect：收集功能, 主要是收集当前元素的状态并返回

end： end主要在拖动结束时触发

import React from 'react'
import { useDrag } from 'react-dnd';

import styles from './index.module.less';
// 唯一识别值
const TYPE = "DRAG";
const Drag = (props: any) => {
    const { item, index } = props;

    const [{ }, drag] = useDrag({
        type: TYPE,
        item: { ...item, index },
        collect: (monitor) => ({
            isDragging: monitor.isDragging()
        }),
        end: (draggedItem) => {

        },
    })
    return (
        <div className={styles.item} ref={drag}>
            {item.title}
        </div>
    )
}

export default Drag

 完成了以上功能，就基本完成了盒子的拖拽功能

  （4）引入使用实现放置功能

Drop 组件

import React from 'react'
import { useDrop } from 'react-dnd';
import styles from './index.module.less';
const TYPE = "DRAG";
const Drop = () => {
    const [, drop] = useDrop({
        accept: TYPE,
    })
    return (
        <div
            className={styles.drop
            }
            ref={drop}
        >

        </div>
    )
}

export default Drop

 不难在我们设置过的盒子中图标已经不一样了

 好了到这我们的基础配置已经结束，剩下的都数据交互了

二、 实现功能

处理数据部分到了，请仔细观看

根组件中 ： 使用useState创建组件的数据状态，传递下去

import React, { useState } from 'react';
import styles from './index.module.less';
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import Drag from './components/Drag';
import Drop from './components/Drop';
//要使用的数据
const listData = [
    {
        title: "文本框",
    },
    {
        title: "数字框",
    },
    {
        title: "选择框",
    },
]
const Home = () => {
    const [selectList, setSelectList] = useState<any[]>([]);
    const onChangeselect = (item: any) => {
      setSelectList([...selectList, item])
    }
    const renderList = (data: any) => data.map((item: any, index: any) => <Drag item={item} index={index} onChange={onChangeselect} />)
    return (
        <DndProvider backend={HTML5Backend}>
            <div className={styles.container}>
                {/*  列表 */}
                <div className={styles.list}>
                    {renderList(listData)}
                </div>

                <div className={styles.box}>
                    {/* 放置的盒子 */}
                    <Drop selectList={selectList} />

                </div>
            </div>
        </DndProvider>
    )
}

export default Home

 Drag 组件中  

 end 接收的是结束时候组件传递的数据，我们将它传递给 根组件做数据存储

import React from 'react'
import { useDrag } from 'react-dnd';

import styles from './index.module.less';
// 唯一识别值
const TYPE = "DRAG";
const Drag = (props: any) => {
    const { item, index, onChange } = props;

    const [{ }, drag] = useDrag({
        type: TYPE,
        item: { ...item, index },
        collect: (monitor) => ({
            isDragging: monitor.isDragging()
        }),
        end: (draggedItem) => {
            onChange(draggedItem)
        },
    })
    return (
        <div className={styles.item} ref={drag}>
            {item.title}
        </div>
    )
}

export default Drag

Drop 组件中

 我们从根组件中接收传递下来的数据并做渲染，那就基本完成了一些功能进去

import React from 'react'
import { useDrop } from 'react-dnd';
import styles from './index.module.less';
import Temp from './Temp';
const TYPE = "DRAG";
const Drop = (props: any) => {
    const { selectList } = props;

    const [, drop] = useDrop({
        accept: TYPE,
    });
    const renderList = (data: any) => data.map((item: any, index: any) => <Temp item={item} index={index} />)
    return (
        <div
            className={styles.drop}
            ref={drop}
        >
            {renderList(selectList)}
        </div>
    )
}

export default Drop

 Temp 组件中

import React from 'react'
import { useDrag } from 'react-dnd';

import styles from './index.module.less';
// 唯一识别值
const TYPE = "DRAG";
const Temp = (props: any) => {
    const { item, index } = props;

    return (
        <div className={styles.temp}>
            {item.title}
        </div>
    )
}

export default Temp

效果图：

 

 一些简单的功能算是做出来的

三、 排序功能

 根组件： 主要是得到目标的下标，做数据调换功能

import React, { useState } from 'react';
import styles from './index.module.less';
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import Drag from './components/Drag';
import Drop from './components/Drop';
//要使用的数据
const listData = [
    {
        title: "文本框",
    },
    {
        title: "数字框",
    },
    {
        title: "选择框",
    },
]
const Home = () => {
    //  存放数据
    const [selectList, setSelectList] = useState<any>([]);
    //  要放置的下标
    const [targetIndex, setTargetIndex] = useState<any>(-1)
    /**
     *  添加时排序
     */
    const onChangeselect = (item: any) => {
        /**
         *  第一个拖入时， 不用排序
         */
        if (targetIndex >= 0) {
            selectList.splice(targetIndex + 1, 0, item)
            setSelectList([...selectList])
        } else {
            setSelectList([...selectList, item])

        }
    }
    const onChangeIndex = (i: number) => {
        setTargetIndex(i)
    }
    /**
     *  排序
     */
    const moveItem = (i: any) => {
        const current = selectList[i];
        const target = selectList[targetIndex];
        selectList[i] = { ...target };
        selectList[targetIndex] = { ...current };
        setTargetIndex([...selectList])

    }
    const renderList = (data: any) => data.map((item: any, index: any) => <Drag item={item} index={index} onChange={onChangeselect} />)
    return (
        <DndProvider backend={HTML5Backend}>
            <div className={styles.container}>
                {/*  列表 */}
                <div className={styles.list}>
                    {renderList(listData)}
                </div>

                <div className={styles.box}>
                    {/* 放置的盒子 */}
                    <Drop selectList={selectList} targetIndex={targetIndex} onChangeIndex={onChangeIndex} moveItem={moveItem} />

                </div>
            </div>
        </DndProvider>
    )
}

export default Home

Drag 和 Drag 组件未做处理

 Temp 组件中

通过hover事件来获取下标， 通过end 来进行调换位置

import React, { useRef } from 'react'
import { useDrag, useDrop } from 'react-dnd';

import styles from './index.module.less';
// 唯一识别值
const TYPE = "DRAG";
const Temp = (props: any) => {
    const { item, index, onChangeIndex, moveItem } = props;
    const tempRef = useRef(null)

    const [{ isDragging }, drag] = useDrag({
        type: TYPE,
        item: { ...item, index },
        collect: (monitor) => ({
            isDragging: monitor.isDragging()
        }),
        end: (draggedItem, monitor) => {
            moveItem(draggedItem.index)
        },
    })
    const [{ isOver }, drop] = useDrop({
        accept: TYPE,
        collect: (monitor) => ({
            // 是否放置在目标上
            isOver: monitor.isOver(),
        }),
        hover: (item: any, monitor) => {
            const didHover = monitor.isOver({ shallow: true });

            if (didHover) {
                //当下标一个， 不操作
                if (item.index === index) {
                    return;
                }
                onChangeIndex(index)
                // setTargetIndex(index);
            }
        },
    });
    drop(drag(tempRef))
    return (
        <div className={styles.temp} ref={tempRef}
            style={{
                opacity: isDragging ? "0.6" : "1",
                borderBottom: isOver
                    ? "3px solid #0089ff"
                    : "3px solid #F2F4F5",
            }}

        >
            {item.title}
        </div>
    )
}

export default Temp

 最终结果效果图

 删除功能也很简单，我就不行了， 点那个删除那个数据即可

好了到这差不多结束了

完美结束，完结撒花

鲤小圈
关注
专栏目录
react使用dnd实现简单的拖拽排序
qq_57926178的博客
04-06 1185
在react项目中使用dnd实现一个简单的拖拽排序功能是一组React实用程序，可帮助您构建复杂的拖放界面，同时保持组件之间的耦合。组件为您的应用程序提供React-DnD功能。必须通过backendc参数将其注入后端，但是也可以将其注入window对象。backend后端是React-DnD中非常好的一种设计方法。可以理解为具体拖拽的实现方式声明拖动源用于将当前组件用作拖动源的钩子。
react-dnd实现列表拖拽排序
cx18333的博客
07-07 2548
项目原本使用了`react-beautiful-dnd`来实现拖拽效果,由于项目中在最外层的`layout`布局中会根据屏幕的宽度和设置的适配宽度比较计算来得出` transform: 'scale`属性的值来做不同分辨率下的屏幕的兼容和适配;奈何 `react-beautiful-dnd`是根据 DOM 元素的位置和尺寸来计算的。当改变元素的缩放比例时，会改变元素的位置和尺寸，会导致拖拽操作的计算不准确,从而导致拖拽异常`拖拽的元素跑偏`.于是直接改用`react-dnd`,解决问题
react项目使用react-dnd实现拖拽排序
02-26
react项目使用react-dnd实现拖拽排序
React DnD HTML5 Backend 使用教程
最新发布
gitblog_00191的博客
08-26 476
React DnD HTML5 Backend 使用教程 项目地址:https://gitcode.com/gh_mirrors/re/react-dnd-html5-backend 欢迎来到React DnD HTML5 Backend的详细指南。本教程将深入介绍这一强大库的核心组件，帮助您快速上手并利用其在React应用中实现拖放功能。我们将按以下结构展开： 1. 项目目录结构及介绍 Reac...
react-dnd实现列表的拖拽排序
fmk1023的博客
09-01 1391
使用useDrag、useDrop。
基于react-dnd简单实现拖拽、排序
weixin_44012931的博客
09-13 4499
基于react-dnd简单实现拖拽、排序
react-dnd拖拽排序
kalinux的博客
11-15 1443
应用场景 实现以上效果
react-dnd-nested:react-dnd 嵌套使用详解
05-29
右侧编辑区内已拖拽的小组件可以在内部继续拖拽进行排序 技术栈 react、react-dom、mobx、mobx-react、react-dnd 实现逻辑 数据结构设计 属性 类型 说明 id Number 组件id（根据规则自动生成） type String 组件类型...
react-dnd-sorting-example:通过react-dnd在多个列表之间拖放的ES5示例
04-28
通过react-dnd在多个列表之间拖放的ES5示例 的ES7示例非常好，但是如果满足以下条件，则不够用： 您的项目在ES5中 你还在React0.13 您需要一个在不同容器之间拖放元素的示例。 希望本示例解决了上述问题。 它用作...
学习使用ReactDnD实现嵌套列表的拖拽排序
08-12
在这个主题中，我们将深入探讨如何利用ReactDnD来实现嵌套列表的拖拽排序。 首先，我们需要安装ReactDnD库。通过npm或yarn可以轻松完成： ```bash npm install react-dnd react-dnd-html5-backend # 或者 yarn add...
react-dnd-experiment:遵循React-DND教程
05-26
React-DND实验是一个基于React库实现的拖放（Drag-and-Drop）功能的项目，它遵循了React-DND官方教程的指导。React-DND是一个强大的库，允许开发者在React组件之间轻松实现拖放操作，无需深入理解底层浏览器事件。在...
React-基于react的拖拽并自动排序
08-14
基于react 的拖拽并自动排序
React-react拖动排序组件
08-14
react拖动排序组件
使用react-dnd做一个拖拽排序
qq_40313245的博客
08-04 1936
有些需求要求排序，拖拽排序无疑是一个很好的交互 首先引入react-dnd import React from 'react' import {DragSource, DropTarget} from 'react-dnd' 效果图 使用 cosnt pic_arr = [] // 需要渲染的数组，自己定义！ ... { _.map(pic_arr, (item, index) => { const prop = { move: this.moveRow
react中实现拖拽排序react-dnd
waillyer的博客
11-24 5904
import React, { useEffect, useRef, useState } from 'react'; import { DndProvider } from 'react-dnd'; import { Form, Card } from 'antd'; import { useSelector } from 'umi'; import { cloneDeep } from 'lodash'; import HTML5Backend from 'react-dnd-html5-backend
react-dnd实现卡片拖拽排序
a_wtf_pgm的博客
11-26 4251
最近工作中遇到一个需求，需要对管理系统中的图片进行拖拽排序的功能 具体用到了react-dnd来实现 GIthub地址：https://github.com/goccult/drag-sort-test 下面是一个利用react-dnd实现的拖拽排序小Demo 首先在react项目中执行以下命令 yarn add react-dnd yarn add react-dnd-htm...
【每天学一点-07】在React中实现拖拽排序（横向、纵向、宫格）
weixin_43906233的博客
09-26 1505
在React中实现拖拽排序（横向拖拽、纵向拖拽、宫格拖拽）
react中使用dnd-kit实现拖曳排序功能
qq_62352333的博客
06-24 1820
由于前阵子需要在开发 Picals 的时候，需要实现一些拖动排序的功能。虽然有原生的浏览器 dragger API，不过纯靠自己手写很难实现自己想要的效果，更多的是吃力不讨好。于是使用了这个库来实现，在这里记录一下踩的坑。
react-dnd 拖拽排序代码实现
03-04
React-dnd 拖拽排序是一种常见的前端交互方式，可以通过以下代码实现：1. 首先需要安装 react-dnd 和 react-dnd-html5-backend 两个库：``` npm install --save react-dnd react-dnd-html5-backend ```2. 在组件中引入 DragDropContext、Droppable 和 Draggable 组件：``` import { DragDropContext, Droppable, Draggable } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; ```3. 定义一个数组作为拖拽列表的数据源：``` const items = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, { id: 5, name: 'Item 5' }, ]; ```4. 在组件中使用 DragDropContext 组件包裹整个列表，并在其中使用 Droppable 组件包裹每个拖拽项：``` <DragDropContext backend={HTML5Backend}> <Droppable droppableId="items"> {(provided) => ( <ul {...provided.droppableProps} ref={provided.innerRef}> {items.map((item, index) => ( <Draggable key={item.id} draggableId={item.id.toString()} index={index}> {(provided) => ( <li {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} > {item.name} </li> )} </Draggable> ))} {provided.placeholder} </ul> )} </Droppable> </DragDropContext> ```5. 在 Draggable 组件中使用 provided.draggableProps 和 provided.dragHandleProps 属性来实现拖拽功能，同时使用 provided.innerRef 属性来获取拖拽元素的引用。6. 在 Droppable 组件中使用 provided.droppableProps 和 provided.innerRef 属性来实现拖拽排序功能。7. 最后，需要在 DragDropContext 组件中定义 onDragEnd 回调函数来处理拖拽结束后的逻辑：``` function onDragEnd(result) { if (!result.destination) { return; } const newItems = Array.from(items); const [reorderedItem] = newItems.splice(result.source.index, 1); newItems.splice(result.destination.index, , reorderedItem); setItems(newItems); }<DragDropContext backend={HTML5Backend} onDragEnd={onDragEnd}> ... </DragDropContext> ```8. 在 onDragEnd 回调函数中，首先判断是否有目标位置，如果没有则直接返回。然后使用 Array.from 方法复制一份原始数据源，从中取出被拖拽的元素并删除，再将其插入到目标位置中，最后使用 setItems 函数更新数据源。以上就是 react-dnd 拖拽排序的代码实现。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值