一、入门指南
awe-dnd是一个基于React的强大的拖放框架。首先，你需要安装React和awe-dnd：
npm install react awe-dnd
当你安装完成后，你需要使用DragSource和DropTarget创建一个拖放组件。例如：
import { DragSource, DropTarget } from 'awe-dnd';
const draggable = {
beginDrag(props) {
return {
id: props.id
}
}
}
const droppable = {
drop(props, monitor) {
// do something
}
}
export default DropTarget('item', droppable, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isHovering: monitor.isOver()
}))(
DragSource('item', draggable, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging()
}))(ItemComponent)
);
请注意，beginDrag()函数必须返回一个对象，表示正在被拖动的数据。
二、定义DragSources和DropTargets
DragSource和DropTarget是React组件，允许您定义可以拖动或停放的组件。不同的元素可以被拖放，因此您可以定义多个DragSource和DropTarget。
三、DragSource属性
DragSource在拖动开始时会发出通知，以便用户知道何时开始移动元素。以下是DragSource常用的属性：
beginDrag: 必填，拖放开始时执行的函数。endDrag: 拖放结束时发生的函数。canDrag: 函数，确定元素是否可以拖动。isDragging: 布尔值，表示元素是否正在拖动。
四、DropTarget属性
与DragSource类似，DropTarget也是一个React组件。以下是DropTarget常用的属性：
drop: 必填，拖放操作完成时的函数。hover: 当元素悬停在拖放目标底部时发生的函数。canDrop: 函数，确定元素是否可以放置到该组件中。isOver: 布尔值，表示元素是否正在拖放目标上方。
五、DragPreviewImage
DragPreviewImage允许您定义图像的Node，在拖动时作为预览显示。
import { DragPreviewImage } from 'awe-dnd';
const Item = ({ id, connectDragSource, connectDragPreview, isDragging }) => {
const ref = useRef(null);
useEffect(() => {
connectDragPreview(ref.current);
}, []);
return (
{/* Your regular component */}
原创文章，作者：LLTAV，如若转载，请注明出处：https://www.506064.com/n/351565.html
微信扫一扫 
支付宝扫一扫 