React-dnd mainly relies on drag and drop to transfer data and build a new DOM. Drag and drop of the original DOM is not recommended.

DragTarget:

import React from 'react'; import { useDrag } from 'react-dnd'; Const DragTarget = (props) => {const [collected, dragRef] = useDrag(() => ({type: 'XXX ', // CanDrag: (monitor) => {// If the target can be pulled,},}), [// This array will update the target state according to the dependency, such as the drop state]); return ( <div ref={dragRef}> </div> ); }; export default DragTarget;Copy the code

DropTarget dropTarget:

import React,{ useRef } from 'react'; import { useDrop } from 'react-dnd'; const DropTarget = () => { const dropCon = useRef(); Const [collectedProps, dropRef] = useDrop(() => ({accept: 'xx', const [collectedProps, dropRef] = useDrop(() => ({accept: 'xx', (item, monitor) => {// item is the dragTarget's item}}); <div ref={dropRef(dropCon)}> <iframe></iframe> </div>); }; export default DropTarget;Copy the code

The dragTarget element will work normally, but the iframe element will not.

When the mouse is over dragTarget, set pointer-Events of iframe to None and set it back when the cursor is over dragTarget.