介绍

React DnD 是一组 React 高阶组件,可以用来帮你构建复杂的拖拽接口,同时解耦你的组件。React DnD 非常适合像 Trello 和 Storify 这样的应用,在不同地方通过拖拽转移数据,而组件会改变它们的外观和应用的状态来响应拖拽事件。

基本用法

  1. 把应用的根组件包装在 DragDropContext 中

  2. 把可以拖拽的组件包装在 DragSource 中

    1. 设置 type

    2. 设置 spec,让组件可以响应拖拽事件

    3. 设置 collect,把拖拽过程中需要信息注入组件的 props

  3. 把可以接受拖拽的组件包装在 DropTarget 中

    1. 设置 type

    2. 设置 spec,让组件可以响应拖拽事件

    3. 设置 collect,把拖拽过程中需要信息注入组件的 props

翻译成代码就是:

 
// 1
import HTML5Backend from 'react-dnd-html5-backend';
import { DragDropContext } from 'react-dnd'; class App { ... }
export default DragDropContext(HTML5Backend)(App); /*---------------------------*/ // 2
import { DragSource } from 'react-dnd'; class MyComponent { ... }
export default DragSource(type, spec, collect)(MyComponent); /*---------------------------*/ // 3
import { DropTarget } from 'react-dnd'; class MyComponent2 { ... }
export default DropTarget(types, spec, collect)(MyComponent2);

这样,MyComponent 就变得可以拖拽,而 MyComponent2 就变得可以接受拖拽了,但这并不代表 MyComponent 可以放到 MyComponent2 中!

一些概念

React DnD 中有一些特殊的概念,理解这些概念之后才能活用这个库!

  • Backend 实现 DnD 的方式,默认是用 HTML5 DnD API,它不能在触屏环境下工作,而且在 IE 下可定制性比其他浏览器弱。你也可以用自己实现,具体请看官方文档。

  • Items 拖拽数据的表现形式,用 Object 来表示。譬如,要拖拽一张卡片,那这张卡片的数据的表现形式可能是 { id: xxx, content: yyy }

  • Types 表示拖/放组件的兼容性,DragSource 和 DropTarget 必须指定 type。只有在 type 相同的情况下,DragSource才能放到 DropTarget 中。

  • Monitors 用来响应拖拽事件,可以用来更新组件的的状态。

  • Connectors 底层接触 DOM 的东西,用来封装你的组件,让你的组件有拖拽的特性。一般在 collect 方法中指定,然后注入到组件的 props 中,最后 render 方法中包装你自己的组件。

  • DragSource && DropTarget 把上面的概念都绑在一起的东西,也是真正跟你的组件打交道的东西。

主要 API 介绍

这些主要 API 都是通过包装你的组件,然后返回一个新的组件。

DragDropContext(backend)

  • backend 实现 DnD 的方式,一般是 HTML5Backend

export default DragDropContext(HTML5Backend)(App);

DragSource(type, spec, collect)

DropTarget(type, spec, collect)

  • type 必须。type 是自定义的,可以是 string,symbol,也可以是用一个函数来返回该组件的其他 props。该组件只能放到相同 type 的 DropTarget 中。

  • spec 必须。一个带有特定方法的纯 Object,里面是一些响应拖拽事件的方法。

  • collect 必须。一个函数返回一个 Object,这个 Object 会注入到组件的 props 中。

  • options 可选。除非有性能问题,否则不需要关心这个参数。

const type = 'xxx';
const spec = { ... };
function collect(connect, monitor) { ... } export default DragSource(type, spec, collect)(MyComponent);
export default DropTarget(type, spec, collect)(MyComponent2);

DragSource#spec

让你的组件响应 dnd 相关事件,支持以下方法:

  • beginDrag(props, monitor, component) 必须

  • endDrag(props, monitor, component) 可选

  • canDrag(props, monitor) 可选

  • isDragging(props, monitor) 可选

参数含义如下:

  • props 组件当前的 props

  • monitor 是一个 DragSourceMonitor 实例,用来查询当前 drag state 的信息。

  • component 表示当前组件,可以省略。

const spec = {
beginDrag(props) {
return {
id: props.id,
content: props.content
}
}
//...
}

DropTarget#spec

让你的组件响应 dnd 相关事件,支持以下方法:

  • drop(props, monitor, component) 可选,响应 drop 事件

  • hover(props, monitor, component) 可选

  • canDrop(props, monitor) 可选

参数含义如下:

  • props 组件当前的 props

  • monitor 是一个 DropTargetMonitor 实例,用来查询当前 drag state 的信息。

  • component 表示当前组件,可以省略。

const spec = {
drop(props, monitor, component) {
// 获取正在拖放的数据
const item = monitor.getItem();
// 更新组件状态
component.setState({
item
}) }
}

DragSource#collect(connect, monitor)

DropTarget#collect(connect, monitor)

返回一个 object,这个 object 可以会注入到组件的 props 中。

  • connect 一个 DragSourceConnector/DropTargetConnector 实例,可以用connect.dragSource()/connect.dropTarget() 来封装我们的组件。

  • monitor 一个 DragSourceMonitor/DropTargetMonitor 实例,用来查询当前拖拽的信息。

function collect(connect, monitor) {
return {
isDragging: monitor.isDragging(),
connectDragSource: connect.dragSource()
}
} class MyComponent extends Component {
render() {
// 可以访问 collect 中返回的 object
const { isDragging, connectDragSource } = this.props;
// 需要用 connect.dragSource()/connect.dropTarget() 封装自己的组件
return connectDragSource(
<div>123</div>
)
}
}

具体例子

出处

参考资料

react-dnd 拖拽的更多相关文章

  1. React 实现拖拽功能

    实现效果:(可戳 https://codepen.io/wenr/pen/EGEQxp 查看) 因为工作中会用到 JIRA 所以想实现一下相似的功能,顺便学习一下 H5 的拖拽.不支持拖拽改变顺序,感 ...

  2. react 可拖拽改变位置和大小的弹窗

    一 目标 最近,项目上需要一个可以弹出一个可以移动位置和改变大小的窗口,来显示一下对当前页面的一个辅助内容 二 思路 1.之前写过一个antd modal的可移动弹窗但是毕竟不如自己写的更定制化,比如 ...

  3. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  4. 强大的拖拽组件:React DnD 的使用

    强大的拖拽组件:React DnD 的使用 react.js 10.6k 次阅读  ·  读完需要 25 分钟 17 文章首发我的个人blog : 原文链接 学习 React DnD 的最初原因是阅读 ...

  5. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  6. GMF Q&A(1): 如何让palette支持拖拽(DnD)等10则

    1,如何让palette支持拖拽(DnD) 在*PaletteFactory类中,把私有类NodeToolEntry 和LinkToolEntry的基类修改为PaletteToolEntry.并在构造 ...

  7. React Editor 应用编辑器(1) - 拖拽功能剖析

    这是可视化编辑器 Gaea-Editor 的第一篇连载分析文章,希望我能在有限的篇幅讲清楚制作这个网页编辑器的动机,以及可能带来的美好使用前景(画大饼).它会具有如下几个特征: 运行在网页 文档流布局 ...

  8. 拖拽功能by javascript 和 react 两种实现方法

    使用鼠标移动图片或者移动图像怪有意思的,那这个移动的效果是怎么实现的呢? 在拖动的过程中,我们会涉及到鼠标向下按,以及移动图形,还有我们松开这几个步骤. 当我们将鼠标向下按的时候,我们鼠标点的这个动作 ...

  9. react实现的点击拖拽元素效果

    之前用vue做日程管理组件的时候,用到了点击拖拽的效果,即点击元素,鼠标移动到哪里,元素移动到哪里,鼠标松开,拖拽停止,现在在弄react,于是也在想实现这个效果,经过一番折腾,效果出来了,代码如下: ...

  10. react 拖拽排序---原生

    定义css, 两个动画 .drag-up { -webkit-animation: dragup ease 0.2s 1; animation: dragup ease 0.2s 1; -webkit ...

随机推荐

  1. Linux常用快捷键以及如何查看命令帮助

    1.1    Linux系统快速操作常用快捷键 快捷键名称 快捷作用 Ctrl + a 将光标移至行首 Ctrl + e 将光标移至行尾 Ctrl + u 前提光标在行尾,则清除当前行所有的内容(有空 ...

  2. 15.Yii2.0框架where单表查询

    目录 新建控制器 HomeController.php 新建model article.php 新建控制器 HomeController.php D:\xampp\htdocs\yii\control ...

  3. Docker工具

    虚拟化 什么是虚拟化 在计算机中,虚拟化(英语:Virtualization)是一种资源管理技术,是将计算机的各种实体资源, 如服务器.网络.内存及存储等,予以抽象.转换后呈现出来, 打破实体结构间的 ...

  4. poj 2236 网络连接问题 并查集

    题意:n台电脑,当两台之间的距离小于d的时候可以连接. 题目会进行操作“修复”还有“查询是否已经连接”.只要在查询的时候输出YES或者ON 思路: 把可以相互连接的 即两者之间的距离小于 d  q[i ...

  5. Linux下open函数、read函数、write函数记录

    open() #include<sys/types.h> #include<sys/stat.h> #include<fcntl.h> int open( cons ...

  6. 在ie9下在textbox框里面输入内容按enter键会触发按钮的事件

    问题 在ie下,如果存在有button标签,如果在textbox里面输入内容,按下enter键,则会触发第一个按钮的click事件,经过测试,在IE10以及以下的都存在这个问题 原因 浏览器默认行为不 ...

  7. Python Cdn平台文件md5验证

    第一步 先用脚本实现基本的md5验证 1.python如何实现文件的下载 方法一: 使用 urllib 模块提供的 urlretrieve() 函数.urlretrieve() 方法直接将远程数据下载 ...

  8. luogu1208 尼克的任务

    倒着推就是了 #include <iostream> #include <cstdio> #include <vector> using namespace std ...

  9. 全套Office办公软件WORD/PPT/EXCEL视频教程 每日更新中

    详情见Processon分享链接:https://www.processon.com/view/link/5b3f40abe4b09a67415e2bfc

  10. Flask_配置文件

    flask中的配置文件是一个flask.config.Config对象(继承字典),默认配置为: default_config = ImmutableDict({ 'DEBUG': get_debug ...