做完案例还是很懵逼

// useDrag 可以让一个 DOM 元素实现拖拽效果

// useDrop 可以让一个 DOM 元素能够放置拖拽元素

参考资料1

//React DnD

参考资料2

https://www.cnblogs.com/dtux/p/17468866.html

import React, { useState } from 'react';
import { useDrop, useDrag, DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import styles from './index.less';const ItemTypes = {BOX: 'demo-app',
};
// useDrag 可以让一个 DOM 元素实现拖拽效果
// useDrop 可以让一个 DOM 元素能够放置拖拽元素const Child = () => {const [{ isDragging }, drag] = useDrag({type: ItemTypes.BOX,item: { aa: '嘻嘻' }, //描述了要拖动的数据。这是可用于放置目标的有关拖动源的唯一信息collect: (monitor) => ({isDragging: monitor.isDragging(),}),});return (<divclassName={styles.child}style={{ opacity: isDragging ? 0.5 : 1 }}ref={drag}>Child</div>);
};const Container = () => {const [value, setValue] = useState();const [{ canDrop, isOver }, drop] = useDrop({accept: ItemTypes.BOX,collect: (monitor) => ({isOver: monitor.isOver(),canDrop: monitor.canDrop(),}),drop: (item) => {setValue(item.aa);console.log('item', item.aa);},});return (<divclassName={styles.container}ref={drop}style={{ background: isOver ? '#FFAA00' : '#FFFFFF' }}>Container{value}{canDrop ? 'Release to drop' : 'Drag a box here'}</div>);
};const DragDnd = (props) => {return (<><div><DndProvider backend={HTML5Backend}><div className={styles.app}><Child /><Container /></div></DndProvider></div></>);
};
export default DragDnd;connectDropTarget: connect.dropTarget(),isOver: monitor.isOver(),isOverCurrent: monitor.isOver({ shallow: true }),canDrop: monitor.canDrop(),itemType: monitor.getItemType()dnd-kit设置拖动区域https://react-dnd.github.io/react-dnd/examples/sortable/stress-test