react-dnd实现拖拽排序

鲤鱼的日常生活

2409人浏览 · 2023-03-02 15:47:40

鲤鱼的日常生活 · 2023-03-02 15:47:40 发布

最近开发一个审批流系统，其中会用到拖拽工具来实现动态表单，就专门研究了一下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

最终结果效果图

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

好了到这差不多结束了

完美结束，完结撒花

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git