2022-11-2 react-dnd实现多个drop池子来回脱拉拽

LeftItem.tsx

import React from "react";
import { useDrag } from "react-dnd";
import './index.css';

const LeftItem = ( {it}: {it: any} ) => {
  const [{ isDragging }, drag, dragPreview] = useDrag(
    () => ({
      type: "itemBox",
      item: it,
      collect: (monitor: any) => ({
        isDragging: monitor.isDragging(),
      }),
    }),
    []
  );
  if(isDragging) {
    return <div ref={drag}></div>
  }
  return <div className="item" ref={drag}>{it.name}</div>;
};

export default LeftItem;

Home.tsx

import React, { ReactElement, useState } from "react";
import "./index.css";
import LeftItem from "../../components/LeftItem";
import { useDrop } from "react-dnd";

interface HomeProps {}

const Home: React.FC<HomeProps> = ({}): ReactElement => {
  const [leftList, setLeftList] = useState<Array<any>>([
    {
      name: "三国演义",
      id: 0,
    },
    {
      name: "水浒传",
      id: 1,
    },
    {
      name: "红楼梦",
      id: 2,
    },
    {
      name: "西游记",
      id: 3,
    },
    {
      name: "儒林外史",
      id: 4,
    },
    {
      name: "聊斋志异",
      id: 5,
    },
  ]);
  const [rightList, setRightList] = useState<Array<any>>([]);
  const [{ isOver, canDrop }, drop] = useDrop(
    () => ({
      accept: "itemBox",
      collect: (monitor) => ({
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop(),
      }),

      // 模块掉落时触发
      drop: (item: any, monitor) => {
        console.log(item);
        let list = [...leftList];
        list.forEach((it: any, index: number) => {
          if (it.id === item.id) {
            list.splice(index, 1);
          }
        });
        setLeftList(list);

        setRightList([...rightList, item]);
      },
    }),
    [leftList, rightList]
  );
  const [{ isOver2, canDrop2 }, drop2] = useDrop(
    () => ({
      accept: "itemBox",
      collect: (monitor) => ({
        isOver2: monitor.isOver(),
        canDrop2: monitor.canDrop(),
      }),

      // 模块掉落时触发
      drop: (item: any, monitor) => {
        console.log(item);
        setLeftList([...leftList, item]);

        let list = [...rightList];
        list.forEach((it: any, index: number) => {
          if (it.id === item.id) {
            list.splice(index, 1);
          }
        });
        setRightList(list);
      },
    }),
    [leftList, rightList]
  );
  return (
    <div className="box">
      <div className="left-box" ref={drop2}>
        {leftList.map((item: any) => (
          <LeftItem key={item.id} it={item} />
        ))}
      </div>
      <div className="right-box" ref={drop}>
        {rightList.map((item: any) => (
          <LeftItem key={item.id} it={item} />
        ))}
      </div>
    </div>
  );
};

export default Home;

注意:一个dragRef或者dropRef只能放在一个ref={}内.

例如如果有多个drop池子，需要创建多个不同的useDrop