React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react-dnd拖拽排序

react中实现拖拽排序react-dnd功能

作者：waillyer

这篇文章主要介绍了react中实现拖拽排序react-dnd功能,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

dnd文档

html 拖拽排序

import React, { useState, useRef } from 'react';
import { cloneDeep } from 'lodash';
import styles from './index.less';

const defaultList = [
    {
        id: 1,
        name: '11',
    },
    {
        id: 2,
        name: '22',
    },
];

export default ({ children = '', arr = [] }) => {
    const [list, setList] = useState([...defaultList]);
    const startRef = useRef(null);
    const changePosition = (dragIndex, hoverIndex) => {
        const data = cloneDeep(list);
        const temp = data[dragIndex];
        // 交换位置
        data[dragIndex] = data[hoverIndex];
        data[hoverIndex] = temp;
        setList(data);
    };
    const onDragStart = index => {
        // console.log('onDragStart', index);
        startRef.current = index;
    };
    const onDragEnd = (e, index) => {
        e.preventDefault();
    };
    const onDragOver = (e, index) => {
        e.preventDefault();
    };
    const onDragEnter = (e, hoverIndex) => {
        e.preventDefault();
        if (startRef.current === hoverIndex) {
            return;
        }
        startRef.current = hoverIndex; // 将当前当前移动到Box的index赋值给当前拖动的box，不然会出现两个盒子疯狂抖动！
        changePosition(startRef.current, hoverIndex);
        // console.log('onDragEnd', hoverIndex, '排序');
    };
    return (
        <div className={styles.list_container}>
            {list.map((item, index) => {
                return (
                    <div
                        className={styles.list_item}
                        draggable
                        key={item?.id}
                        onDragStart={$event => onDragStart(index)}
                        onDragEnd={$event => onDragEnd($event, index)}
                        onDragEnter={$event => onDragEnter($event, index)}
                        onDragOver={$event => onDragOver($event, index)}
                    >
                        {item.name}
                        {/* {children} */}
                    </div>
                );
            })}
        </div>
    );
};

拖拽组件封装

import React, { useRef } from 'react';
import { useDrop, useDrag } from 'react-dnd';
import styles from './index.less';
// 拖拽排序
export default ({ id = '', index = '', changePosition = () => {}, className = {}, children, rowKey = '' }) => {
    const ref = useRef(null);
    // 因为没有定义收集函数，所以返回值数组第一项不要
    const [, drop] = useDrop({
        accept: 'DragDropBox', // 只对useDrag的type的值为DragDropBox时才做出反应
        hover: (item, monitor) => {
            // 这里用节流可能会导致拖动排序不灵敏
            if (!ref.current) return;
            const dragIndex = item.index;
            const hoverIndex = index;
            if (dragIndex === hoverIndex) return; // 如果回到自己的坑，那就什么都不做
            changePosition(dragIndex, hoverIndex); // 调用传入的方法完成交换
            item.index = hoverIndex; // 将当前当前移动到Box的index赋值给当前拖动的box，不然会出现两个盒子疯狂抖动！
        },
    });

    const [{ isDragging }, drag] = useDrag({
        item: {
            type: 'DragDropBox',
            id,
            index,
        },
        collect: monitor => ({
            isDragging: monitor.isDragging(), // css样式需要
        }),
    });

    return (
        // ref 这样处理可以使得这个组件既可以被拖动也可以接受拖动
        <div ref={drag(drop(ref))} style={{ opacity: isDragging ? 0.5 : 1 }} className={className.dragBox}>
            <span key={rowKey} className={styles.reviewer}>
                {children}
            </span>
        </div>
    );
};

使用组件

import React from 'react';
import { DndProvider } from 'react-dnd';
import { useSelector } from 'umi';
import { cloneDeep } from 'lodash';
import HTML5Backend from 'react-dnd-html5-backend';
import ReactDndDragSort from '@/components/ReactDndDragSort';
import styles from './index.less';

export default ({ currentModel, dispatch }) => {
    const { reviewerList = [] } = useSelector(state => state[currentModel]);

    const changePosition = (dragIndex, hoverIndex) => {
        const data = cloneDeep(reviewerList);
        const temp = data[dragIndex];
        // 交换位置
        data[dragIndex] = data[hoverIndex];
        data[hoverIndex] = temp;
        // setBoxList(data);
        dispatch({
            type: `${currentModel}/overrideStateProps`,
            payload: {
                reviewerList: data,
            },
        });
    };
    return (
        <>
            <div className={styles.reviewerContainer}>
                <DndProvider backend={HTML5Backend}>
                    {reviewerList?.length ? (
                        <div style={{ display: 'flex' }}>
                            {reviewerList.map((item, index) => {
                                return (
                                    <ReactDndDragSort
                                        rowKey={item?.id}
                                        index={index}
                                        id={item?.id}
                                        changePosition={changePosition}
                                    >
                                        <span key={item?.id} className={styles.reviewer}>
                                            <div className={styles.reviewerImg}>
                                                <span
                                                    className="saas saas-failure1"
                                                    onClick={() => {
                                                        const listFilter = reviewerList.filter(
                                                            (_, itemIndex) => itemIndex !== index,
                                                        );
                                                        dispatch({
                                                            type: `${currentModel}/overrideStateProps`,
                                                            payload: {
                                                                reviewerList: listFilter,
                                                            },
                                                        });
                                                    }}
                                                />
                                            </div>
                                            <div className={styles.reviewerTxt}>{item.name}</div>
                                        </span>
                                    </ReactDndDragSort>
                                );
                            })}
                        </div>
                    ) : null}
                </DndProvider>
            </div>
        </>
    );
};

ts 版本

import React, { useRef } from "react";
import { useDrop, useDrag } from "react-dnd";
import "./index.less";
// dnd拖拽排序
export default (props: any) => {
  const {
    id = "",
    index = "",
    changePosition = () => {},
    className = "",
    children,
    rowKey = "",
  } = props;
  const ref: any = useRef(null);
  // 因为没有定义收集函数，所以返回值数组第一项不要
  const [, drop] = useDrop({
    accept: "DragDropBox", // 只对useDrag的type的值为DragDropBox时才做出反应
    hover: (item: any, monitor: any) => {
      // 这里用节流可能会导致拖动排序不灵敏
      if (!ref.current) return;
      const dragIndex = item.index;
      const hoverIndex = index;
      if (dragIndex === hoverIndex) return; // 如果回到自己的坑，那就什么都不做
      changePosition(dragIndex, hoverIndex); // 调用传入的方法完成交换
      item.index = hoverIndex; // 将当前当前移动到Box的index赋值给当前拖动的box，不然会出现两个盒子疯狂抖动！
    },
  });

  const [{ isDragging }, drag] = useDrag(() => ({
    type: "DragDropBox",
    item: { id, type: "DragDropBox", index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(), // css样式需要
    }),
  }));
  const changeRef = drag(drop(ref));

  return (
    // ref 这样处理可以使得这个组件既可以被拖动也可以接受拖动
    <div
      //@ts-ignore
      ref={changeRef}
      style={{ opacity: isDragging ? 0.5 : 1 }}
      className="dragBox"
    >
      <span key={rowKey} className={className}>
        {children}
      </span>
    </div>
  );
};

ts使用

import React, { useState } from "react";
import { DndProvider } from "react-dnd";
import { useSelector } from "react-redux";
//@ts-ignore
import { cloneDeep } from "lodash";
import { HTML5Backend } from "react-dnd-html5-backend";
import ReactDndDragSort from "@/components/ReactDndDragSort";
import "./index.less";
console.log("HTML5Backend", HTML5Backend);

export default () => {
  const dList = [
    {
      id: 99,
      name: "组1",
    },
    {
      id: 22,
      name: "组2",
    },
  ];
  const [reviewerList, setReviewerList] = useState(dList);

  const changePosition = (dragIndex: any, hoverIndex: any) => {
    const data = cloneDeep(reviewerList);
    const temp = data[dragIndex];
    // 交换位置
    data[dragIndex] = data[hoverIndex];
    data[hoverIndex] = temp;
    console.log("交换完成---", data);
    setReviewerList(data);
  };
  return (
    <>
      <div className="reviewerContainer">
        <DndProvider backend={HTML5Backend}>
          {reviewerList?.length ? (
            <div>
              {reviewerList.map((item: any, index: any) => {
                return (
                  <ReactDndDragSort
                    rowKey={item?.id}
                    index={index}
                    id={item?.id}
                    changePosition={changePosition}
                  >
                    <div key={item?.id} className="reviewer">
                      <div className="reviewerTxt">{item.name}</div>
                    </div>
                  </ReactDndDragSort>
                );
              })}
            </div>
          ) : null}
        </DndProvider>
      </div>
    </>
  );
};

到此这篇关于react中实现拖拽排序react-dnd的文章就介绍到这了,更多相关react-dnd拖拽排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文