在当前可视化需求越来越多，对于可视化业务的需求必然躲不开拖拽功能。加之现在低代码平台的兴起，拖拽功能也会越来越多。

首先需要 DndProvider 组件为您的应用程序提供 React-DnD 功能。这必须通过backendprop 注入后端，但也可以注入window对象

import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

export default class YourApp {
  render() {
    return (
      <DndProvider backend={HTML5Backend}>
        /* Your Drag-and-Drop Application */
      </DndProvider>
    )
  }
}

react-dnd 分为 Components 和 Hooks 两种模式

1、Components 模式 - 采用链式调用的方式

DragSource -使组件能够被拖拽，DropTarget-使组件能够放置拖拽组件,DragPreviewImage-拖拽预览

import { DragSource, DragPreviewImage } from 'react-dnd'

function DraggableHouse({ connectDragSource, connectDragPreview }) {
  return (
    <>
      <DragPreviewImage src="house_dragged.png" connect={connectDragPreview} /> //拖动预览样式
      <div ref={connectDragSource}>🏠</div>
    </>
  )
}
export default  DragSource(
  type, 只有为相同类型注册的 drop targets 才会对此拖动源生成的项目做出反应
  spec,//里面有各种方法。它描述了拖动源如何对拖放事件做出反应。比如：beginDrag，endDrag...
  collect // 函数返回一个对象，会将对象的属性都赋到组件的 props 中去。这些属性需要自己定义。
)(DropTarget(type,spec,collect))(DraggableHouse)

2、Hooks 模式-提供钩子函数，使其有拖拽功能

useDrag -使组件能够被拖拽，useDrop-使组件能够放置拖拽组件

const [{ }, drag] = useDrag(() => ({
    type,
    item，// 对象或函数 描述正在拖动的数据。这是拖放目标可以获得的关于拖动源的唯一信息。
    options/previewOptions....//需要的方法，根据需求需要去选择。
    collect //自定义 采集功能。它应该返回 props 的普通对象以返回以注入到您的组件中。它接收两个参数，monitor和props。
 }));

 const [{ }, drop] = useDrop(() => ({ 
    accept, -- // 字符串、符号或两者的数组。此放置目标只会对指定类型或类型的拖动源生成的项目做出反应。
    options/drop/hover/canDrop -- // 需要的方法，根据需求需要去选择。
    collect // 自定义 采集功能。它应该返回 props 的普通对象以返回以注入到您的组件中。它接收两个参数，monitor和props。
 }));



return (
  <div ref={drag}> //通过ref 去绑定
        /*需要拖拽的element*/
   </div>
)

Hooks 模式还有useDragLayer  DragDropManager 两个功能

useDragLayer -- 允许将组件作为拖动层连接到 dnd 系统中

DragDropManager -- 为用户提供了进入 dnd 系统的权限。DragDropManager 实例是由 React-dnd 创建的单例，包含对状态、监视器、后端等的访问 

以上就是我的react-dnd 的学习笔记，后面根据学习理解会继续更新最新的理解。