react-dnd拖拽页面记录

react-dnd
官网地址：https://react-dnd.github.io/react-dnd/docs/api/use-drop

拖拽

安装
npm install --save react-dnd react-dnd-html5-backend immutability-helper

实现拖拽划分四部

1、 外层包裹盒子

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
    <DndProvider backend={HTML5Backend}>
		// <DragEnable />   /    <DropEnable/>
    </DndProvider>

2、 useDrag DragEnable

参考api
item：必填。描述了要拖动的数据 ( 包含type: 对应drop>accept )
begin(monitor)： 可选的。拖动操作开始时触发。
end(item, monitor)： 可选的。当拖动停止时，end被调用。
canDrag(monitor)： 可选的。使用它来指定当前是否允许拖动。
isDragging(monitor)： 可选的。默认情况下，只有启动拖动操作的拖动源才被视为拖动。
collect： 可选的。收集功能。它应该返回道具的简单对象以返回注入到组件中。它接收两个参数，monitor和props。
spec：必填。一个普通的JavaScript对象，上面有一些允许的方法。它描述了拖动源如何对拖放事件做出反应。

import { useDrag, DragSourceMonitor } from 'react-dnd';

const DragEnable = () => {
	
  const item: templateProps = {
    id: '-1', // 后面保存数据使用 ，默认为-1 是便于接收时 判断对象
    type: props.meta.type, // 组件 分辨
    pid: 'root', // 父级 id
    props: props.meta.initProps, // 组件配置参数
  };
  
  const dragItem = {   
    target: item, // 当前目标配置数据
    type: 'NEW_COMPONENT' ,  // 此处 与 useDrop 中的 accept 对应 （一致时可拖放 ，否者不可放置）
  };

	const [{ isDragging },drag] = useDrag({
		item: dragItem ,
		collect: ( monitor ) => { isDragging: monitor.isDragging() },
		 begin: () => {
	    // 在此出将 item（拖拽对象数据 ） 添加进数据列 
	    // 在drop 中战术 占位元素
	      return dragItem;
	    },
	    end: ( _: unknown, monitor: DragSourceMonitor ) => {
	     			// 若可以则加入，若不可以，去掉占位元素
	    		console.log( item: item, canDrop: monitor.didDrop())
	    		 // didDrop 没有放置就删除此数据
	    		 // 去调 drop 中的占位元素
	    }
	})
	return  <div ref={drag}>
      {props.children} //包裹每个组件
    </div>
}

3、 useDrop DragEnable

参考api 
accept：必填。 （对应 drag item.type ）
options： 可选的。一个普通的对象。
drop(item, monitor)： 可选的。当兼容项目放在目标上时调用。
hover(item, monitor)： 可选的。将项目悬停在组件上时调用。
canDrop(item, monitor)： 可选的。使用它来指定放置目标是否能够接受该物品。如果要始终允许它，则只需忽略此方法。
collect： 可选的。收集功能。它应该返回道具的简单对象以返回注入到组件中。它接收两个参数，monitor和props

import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';

const DropEnable: React.FC<DropEnableType> = ({ id, target, meta = {}, active, style, index, onMove, onActive, children}) => {

	 const dragItem = {
	    target,
	    index,
	    type: SORT_COMPONENT
	 };

	const [ {isOverCurrent}， drop] = useDrop({
		accept:[ 'NEW_COMPONENT' ], // 此处 与 useDrag 中的 item.type 对应 （一致时可拖放 ，否者不可放置）
		collect: ( mointor) => ({
			// 嵌套拖拽时使用 shallow :true 表示嵌套时 完全进入组件， 只触发当前组件
			//不触发 外层组件
			  isOverCurrent: monitor.isOver({ shallow: true }),
	      		itemType: monitor.getItemType(),
		}),
		drop: (item, monitor) => {
			const didDrop = monitor.didDrop()
			 if (didDrop) {
		        return;
		     }
		},
		hover(item:DragItem, monitor:DropTargetMonitor){
				  //  非容器组件，进行排序判定
			      flatHover({ //将数据进行排序展示
			        item,
			        target,
			        hoverIndex,
			        clientOffset,
			        hoverBoundingRect,
			        onMove
			      });

		}	
	})
	  drop(ref)
	return (
	<div ref={ref}> </div>
	)
}
export default DropEnable;

4、 数据展示

将拖拽生成的数据结构 ，进行遍历展示
优化点： 可以将数据扁平化 利于数据修改 与 整理

数据序列化插件–normalizr