本文详细讲解了 react-dnd 的 API 以及用法,并且附上了可供参考的 Demo,希望能够给需要的朋友提供一下帮助。
React DnD 是一组 React 高阶组件,使用的时候只需要使用对应的 API 将目标组件进行包裹,即可实现拖动或接受拖动元素的功能。将拖动的事件转换成对象中对应状态的形式,不需要开发者自己判断拖动状态,只需要在传入的 spec 对象中各个状态属性中做对应处理即可。刚刚接触可能难以理解,真正熟悉用法之后会感觉很方便。
本文
Demo
地址:react-dnd-dustbin。如有帮助,欢迎 Star。
使用
DragSource
包裹住组件,使其可以进行拖动。
import React, {
Component } from 'react';
import {
DragSource } from 'react-dnd';
const spec = {
beginDrag(props, monitor, component) {
// 这里 return 出去的对象属性自行选择,这里只是用 id 作为演示
return {
id: props.id }
}
endDrag(props, monitor, component) {
...
}
canDrag(props, monitor) {
...
}
isDragging(props, monitor) {
...
}
}
const collect = (connect, monitor) => ({
// 这里返回一个对象,会将对象的属性都赋到组件的 props 中去。这些属性需要自己定义。
connectDropTarget: connect.dropTarget(),
id: monitor.getItem().id
})
@DragSource(type, spec, collect)
class MyComponent extends Component {
/* ... */
}
export default MyComponent;
参数讲解:
drop targets
才会对此拖动源生成的项目做出反应beginDrag(props, monitor, component)
:必填。当拖动开始时,beginDrag
被调用。您必须返回描述被拖动数据的纯 JavaScript
对象。您返回的内容会被放置到 monitor.getItem()
获取到的对象中。
endDrag(props, monitor, component)
:可选的。当拖动停止时,endDrag
被调用。对于每个 beginDrag
,endDrag
都会对应。
canDrag(props, monitor)
: 可选的。用它来指定当前是否允许拖动。如果您想要始终允许它,只需省略此方法即可。注意:您可能无法调用monitor.canDrag()
此方法。
isDragging(props, monitor)
: 可选的。默认情况下,仅启动拖动操作的拖动源被视为拖动。注意:您可能无法调用 monitor.isDragging()
此方法。
props
:当前组件的 props
monitor
:一个 DragSourceMonitor
实例。使用它来查询有关当前拖动状态的信息,例如当前拖动的项目及其类型,当前和初始坐标和偏移,以及它是否已被删除。component
:指定时,它是组件的实例。使用它来访问底层DOM节点以进行位置或大小测量,或调用 setState
以及其他组件方法。isDragging
、 canDrag
方法里获取不到 component
这个参数,因为它们被调用时实例可能不可用connect
: 一个 DragSourceConnector
实例。它有两种方法:dragPreview()和dragSource()。
monitor:一个 DragSourceMonitor
实例。包含下面各种方法:
方法 | 含义 |
---|---|
canDrag() |
是否可以被拖拽。如果没有正在进行拖动操作,则返回 true |
isDragging() |
是否正在被拖动。如果正在进行拖动操作,则返回 true |
getItemType() |
返回标识当前拖动项的类型的字符串或ES6符号。 如果没有拖动项目,则返回 null |
getItem() |
返回表示当前拖动项的普通对象。 每个拖动源都必须通过从其beginDrag()方法返回一个对象来指定它。 如果没有拖动项目,则返回 null |
getDropResult() |
返回表示最后记录的放置 drop result 对象 |
didDrop() |
如果某个 drop target 处理了 drop 事件,则返回 true,否则返回 false。即使 target 没有返回 drop 结果,didDrop() 也会返回true。 在 endDrag() 中使用它来测试任何放置目标是否已处理掉落。 如果在 endDrag() 之外调用,则返回 false |
getInitialClientOffset() |
返回当前拖动操作开始时指针的{x,y} |
文章浏览阅读608次。IntelliJ IDEA创建maven web项目不妨先了解下Maven 项目是什么什么是maven项目?简单来说,就是maven工具构建的项目就是maven项目。maven是一个跨平台的项目管理软件。为什么要用maven构建项目?当你的项目很大,当你需要模块化拆分,部署,当你的jar包乱的跟粥似的,开发人员使用jar冲突等等问题出现时……你用maven就是合适的,但前...
文章浏览阅读3.1k次,点赞2次,收藏10次。一.概述HAN(Hierarchical Attention Networks for Document Classification),层次化注意力机制等,是Zichao Yang等2016年提出的一种新型文本分类模型。它主要使用词(字)语级别,和句子级别的注意力机制Attention,构建文本特征表示,层次化文本(即字、词、句子),十分符合人类直觉,也是近年来图像、NLP等..._中文短文本模型
文章浏览阅读619次。--配置权限 exec sp_configure 'show advanced options',1reconfigureexec sp_configure 'Ad Hoc Distributed Queries',1reconfigureexec sp_configure 'xp_cmdshell',1reconfigurego
文章浏览阅读2.4k次。Airtest工具安装教程最近需要获取某些手机APP的输入下拉框词,所以需要控制手机,并获取信息。这里记录一下安装流程,以防以后忘记。步骤1. 安装JDK因为之前安装别的包(hanlp), 所以已经安装过JDK了。2. 安装SDK我下载http://tools.android-studio.org/index.php/sdk下载好了,到安装目录,运行SDK Manager.exe勾选 Android SDK Platform-tools,点右下角的install。注意需要翻墙。最后_安装airtesttool
文章浏览阅读239次。TCP/IP 模型与 OSI 模型对比_tcp/ip 模型 对比
文章浏览阅读434次。/*** Introduction to Algorithms, Second Edition * 13 Red-Black Trees* * 红黑树的条件:* 1.每个节点标记为“红”或“黑”。* 2.根标记为“黑”。* 3.所有叶节点(nil)标记为“黑”。* 4.如果一个节点为“红”,则它的两个节点都为“黑”。* 5.对每个的节点,从该节点至后继叶节点包含相同数量的“黑”节点。* @auth_junit红黑树
文章浏览阅读53次。开篇只能说惭愧,在软件行业混迹了近8年,也过而立之年,才开始自己技术博客的历程。从小语文就不好,所以一直以此为借口总没有开始写些什么。到后来发现,这种借口导致自己养成不总结->懒思考的臭毛病,直接导致了自己的积累也较少,这种习惯和现象非常可怕。所以决心从今天起,把自己的所学所想在这里记录下来。也希望能借助这个平台和大家分享,交流,在技术上不断磨练、雕琢自己!来这...
文章浏览阅读2.6k次。ShardingSphere主键生成策略就是使用雪花算法和UUID两种方式。这两种主要就是通过SPI的方式实现,其主要目的也是为了好扩展,也可以自行实现接口,自定义主键生成策略。插入日志输出:_shardingsphere keygenerator
文章浏览阅读3.1w次,点赞2次,收藏8次。默认情况下,我们将鼠标移动到textarea的右下角时发现文本域是可以通过拖动的方式改变其大小的,这会影响我们原本的页面布局。 若想设置其不可拖动,可为其添加如下属性:_antd 大文本框禁止拖拽
文章浏览阅读92次。今天Python3.8发布啦,新版本添加了很多全新功能,也表明Python的版本之路前进了一大步,小编整理了新版本的几个主要更新,为大家做详细解读!顺便一提,导致Python之父龟叔愤然离职的赋值表达式功能还是上线了~新增赋值表达式PEP 572的标题是赋值表达式,也叫做「命名表达式」,不过它现在被广泛的别名是「海象运算符」(The Walrus Operator)。因为:=很像海象「眼睛小,长着..._python sys.addaudithook
文章浏览阅读2.4k次,点赞3次,收藏30次。将tif转为DataFrame存为csv此数据为modis的LAI产品,仅有LAI一个波段from osgeo import gdalimport pandas as pdgdal.AllRegister()filePath = r'C:\Users\Administrator\遥感文件\MOD15A2H.006_Lai_500m_doy2020097_aid0001.tif'dataset = gdal.Open(filePath)adfGeoTransform = dataset.Ge_python gdal tif
文章浏览阅读47次。写了个小程序,在MSVC 2008 和 gcc 3.4.4 ( under cygwin)下面跑了一下,发现结果不一样。 gcc 3.4.4: 1 1 gcc 4.5.2 2 2 MSVC: ..._msvc 不同版本 运算结果不同