强大的拖拽组件:React DnD 的使用
文章首发我的个人blog : 原文链接 学习 React DnD 的最初原因是阅读《如何写一个拖拽日历组件》附的源码时,看不懂拖拽组件 React DnD 的相关代码,于是行动力极强地学习了React DnD这个组件。 本文会通过 在根组件(Contaier.jsx)展示将垃圾(Box.jsx)扔进垃圾桶(Dustbin.jsx)的例子,解释如何使用React DnD最基本的拖拽用法。 预览 垃圾桶效果 查看 垃圾桶源码 核心API想要灵活使用,就先知道几个核心API
大致理解这几个API的概念后,垃圾(Box.jsx)扔进垃圾桶(Dustbin.jsx)的代码将会是: // Box.jsx import { DragSource } from 'react-dnd'; @DragSource(type,spec,collect) export default class Box { /* ... */ } // Dustbin.jsx import { DropTarget } from 'react-dnd'; @DropTarget(types,collect) export default class Contaier { /* ... */ } // Contaier.jsx (DragDropContex) import { DragDropContext } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' import Box from './Box'; import Dustbin from './Dustbin'; @DragDropContext(HTML5Backend) export default class Contaier extends Component { render() { return ( <div> <Dustbin/> <Box/> </div> ); } } // 也可以写成 Contaier.jsx (DragDropContextProvider) import { DragDropContextProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' import Box from './Box'; import Dustbin from './Dustbin'; export default class DustbinContaier extends Component { render() { return ( <DragDropContextProvider backend = { HTML5Backend }> <div> <Dustbin/> <Box/> </div> </DragDropContextProvider> ); } } API参数介绍上面的代码 @DragSource(type,collect) @DropTarget(types,collect) 可以看到
下面约定 source组件 为DragSource包装的组件(本示例为Box.jsx), target组件 为DropTarget包装的组件(本示例为Dustbin.jsx)。 type当 type的类型可以是 string,symbol,也可以是用一个函数来返回该组件的其他 props。 翻译为代码: // ItemTypes.js 定义类型 export default { BOX: 'box',} // Box.jsx import ItemTypes from './ItemTypes' @DragSource(ItemTypes.BOX,collect) // Dustbin.jsx import ItemTypes from './ItemTypes' @DropTarget(ItemTypes.BOX,collect) specspec定义特定方法的对象,如 DragSource specObj
翻译为代码: // Box.jsx const sourceSpec = { beginDrag(props,component){ // 返回需要注入的属性 return { id: props.id } },endDrag(props,component){ // .. },canDrag(props,monitor){ // .. },isDragging(props,monitor){ // .. } } @DragSource(ItemTypes.BOX,sourceSpec,collect) DropTarget specObj
翻译为代码: // Dustbin.jsx const targetSpec = { drop(props,component){ // .. },hover(props,canDrop(props,monitor){ // .. } } @DropTarget(ItemTypes.BOX,targetSpec,collect) specObj 对象方法相关参数
collectcollect 是一个函数,默认有两个参数: 参数 connect
翻译为代码: // Box.jsx @DragSource(ItemTypes.BOX,(connect)=>({ connectDragSource: connect.dragSource(),connectDragPreview: connect.dragPreview(),})) export default class Box { render() { const { connectDragSource } = this.props return connectDragSource( <div> { /* ... */ } </div>,) } } // Dustbin.jsx @DropTarget(ItemTypes.BOX,(connect)=>{ connectDropTarget: connect.dropTarget(),}) export default class Dustbin { render() { const { connectDropTarget } = this.props return connectDropTarget( <div> { /* ... */ } </div>,) } } 参数 monitormonitor 用于查询当前的拖拽状态,其对应实例内置了很多方法。
内置方法列表: // DragSourceMonitor monitor.canDrag() // 是否能被拖拽 monitor.isDragging() // 是否正在拖拽 monitor.getItemType() // 拖拽组件type monitor.getItem() // 当前拖拽的item monitor.getDropResult() // 查询drop结果 monitor.didDrop() // source是否已经drop在target monitor.getInitialClientOffset() // 拖拽组件初始拖拽时offset monitor.getInitialSourceClientOffset() monitor.getClientOffset() // 拖拽组件当前offset monitor.getDifferenceFromInitialOffset() // 当前拖拽offset和初始拖拽offset的差别 monitor.getSourceClientOffset() // DropTargetMonitor monitor.canDrop() // 是否可被放置 monitor.isOver(options) // source是否在target上方 monitor.getItemType() // 拖拽组件type monitor.getItem() // 当前拖拽的item monitor.getDropResult() // 查询drop结果 monitor.didDrop() // source是否已经drop在target monitor.getInitialClientOffset() // 拖拽组件初始拖拽时offset monitor.getInitialSourceClientOffset() monitor.getClientOffset() // 拖拽组件当前offset monitor.getDifferenceFromInitialOffset() // 当前拖拽offset和初始拖拽offset的差别 monitor.getSourceClientOffset() 具体例子先草草丢下官方例子和源码:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |