React-dnd拖拽目标无法放置到iframe

react-dnd 主要是依赖拖拽传输数据，构建新的dom，不建议拖拽原dom。

拖拽目标 dragTarget:

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

const DragTarget = (props) => {

    const [collected, dragRef] = useDrag(() => ({
        type: 'xxx', // 类型定义，根据自己爱好来
        item: { id }, // 向DropTarget传输的参数
        canDrag: (monitor) => {
            // 判断在一定条件下目标可拖拽
        },
    }), [ // 这个数组根据依赖会动态更新拖拽目标状态；比如拖拽状态的改变  ]);

      
      return (
          <div ref={dragRef}>
          </div>
      );
};

export default DragTarget;

放置目标 dropTarget:

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

const DropTarget = () => {
    const dropCon = useRef();
    const [collectedProps, dropRef] = useDrop(() => ({
        accept: 'xx', // 和dragTarget type同值，接收dragTarget
        drop: (item, monitor) => {
            // item 就是dragTarget的item字段传过来的
        }
     }));

      
      return (
          // dropRef是可以对dropCon再进行包裹的
          <div ref={dropRef(dropCon)}>
              <iframe></iframe>
          </div>
      );
};

export default DropTarget;

一般元素 dragTarget都能正常放上去，但是iframe则不行，解决办法：

当鼠标放置在dragTarget上时，将iframe的pointer-events设置为none，放置成功后设置回来就行了。