react-dnd 用法详解_react dnd的使用-程序员宅基地

技术标签: 前端开发  react-dnd  React  

本文详细讲解了 react-dnd 的 API 以及用法,并且附上了可供参考的 Demo,希望能够给需要的朋友提供一下帮助。


一、概念

React DnD 是一组 React 高阶组件,使用的时候只需要使用对应的 API 将目标组件进行包裹,即可实现拖动或接受拖动元素的功能。将拖动的事件转换成对象中对应状态的形式,不需要开发者自己判断拖动状态,只需要在传入的 spec 对象中各个状态属性中做对应处理即可。刚刚接触可能难以理解,真正熟悉用法之后会感觉很方便。

本文 Demo 地址:react-dnd-dustbin。如有帮助,欢迎 Star。


二、DragSource:使组件能够被拖拽

使用 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;

参数讲解:

  • type: 必填。字符串,ES6符号或返回给定组件的函数props。只有为相同类型注册的 drop targets 才会对此拖动源生成的项目做出反应
  • spec:必填。一个普通的JavaScript对象,上面有一些允许的方法。它描述了拖动源如何对拖放事件做出反应。
  • collect:必填。收集功能。它应该返回一个普通的对象注入你的组件。它接收两个参数:connect和monitor。
  • options:可选的。一个普通的对象。

spec 对象中的方法

  • beginDrag(props, monitor, component):必填。当拖动开始时,beginDrag 被调用。您必须返回描述被拖动数据的纯 JavaScript 对象。您返回的内容会被放置到 monitor.getItem() 获取到的对象中。

  • endDrag(props, monitor, component):可选的。当拖动停止时,endDrag 被调用。对于每个 beginDragendDrag 都会对应。

  • canDrag(props, monitor): 可选的。用它来指定当前是否允许拖动。如果您想要始终允许它,只需省略此方法即可。注意:您可能无法调用monitor.canDrag() 此方法。

  • isDragging(props, monitor): 可选的。默认情况下,仅启动拖动操作的拖动源被视为拖动。注意:您可能无法调用 monitor.isDragging() 此方法。

方法中的参数 props, monitor, component

  • props:当前组件的 props
  • monitor:一个 DragSourceMonitor 实例。使用它来查询有关当前拖动状态的信息,例如当前拖动的项目及其类型,当前和初始坐标和偏移,以及它是否已被删除。
  • component:指定时,它是组件的实例。使用它来访问底层DOM节点以进行位置或大小测量,或调用 setState 以及其他组件方法。isDraggingcanDrag 方法里获取不到 component 这个参数,因为它们被调用时实例可能不可用

collect 中的 connect 和 monitor 参数

  • connect: 一个 DragSourceConnector 实例。它有两种方法:dragPreview()和dragSource()。

    • dragSource() => (elementOrNode, options?):常用方法,返回一个函数,传递给组件用来将 source DOM 和 React DnD Backend 连接起来
      • dragPreview():返回一个函数,传递给组件用来将拖动时预览的 DOM 节点 和 React DnD Backend 连接起来
  • 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}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zgd826237710/article/details/89326588

智能推荐

IntelliJ IDEA创建maven web项目-程序员宅基地

文章浏览阅读608次。IntelliJ IDEA创建maven web项目不妨先了解下Maven 项目是什么什么是maven项目?简单来说,就是maven工具构建的项目就是maven项目。maven是一个跨平台的项目管理软件。为什么要用maven构建项目?当你的项目很大,当你需要模块化拆分,部署,当你的jar包乱的跟粥似的,开发人员使用jar冲突等等问题出现时……你用maven就是合适的,但前...

中文短文本分类实例十二-HAN(Hierarchical Attention Networks for Document Classification)_中文短文本模型-程序员宅基地

文章浏览阅读3.1k次,点赞2次,收藏10次。一.概述HAN(Hierarchical Attention Networks for Document Classification),层次化注意力机制等,是Zichao Yang等2016年提出的一种新型文本分类模型。它主要使用词(字)语级别,和句子级别的注意力机制Attention,构建文本特征表示,层次化文本(即字、词、句子),十分符合人类直觉,也是近年来图像、NLP等..._中文短文本模型

SQL直接操作excel表(查询/导入/插入)-程序员宅基地

文章浏览阅读619次。--配置权限 exec sp_configure 'show advanced options',1reconfigureexec sp_configure 'Ad Hoc Distributed Queries',1reconfigureexec sp_configure 'xp_cmdshell',1reconfigurego

Airtest工具安装教程-自用_安装airtesttool-程序员宅基地

文章浏览阅读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

TCP/IP 模型与 OSI 模型对比_tcp/ip 模型 对比-程序员宅基地

文章浏览阅读239次。TCP/IP 模型与 OSI 模型对比_tcp/ip 模型 对比

红黑树的实现和代码_junit红黑树-程序员宅基地

文章浏览阅读434次。/*** Introduction to Algorithms, Second Edition * 13 Red-Black Trees* * 红黑树的条件:* 1.每个节点标记为“红”或“黑”。* 2.根标记为“黑”。* 3.所有叶节点(nil)标记为“黑”。* 4.如果一个节点为“红”,则它的两个节点都为“黑”。* 5.对每个的节点,从该节点至后继叶节点包含相同数量的“黑”节点。* @auth_junit红黑树

随便推点

一个8年IT人,点滴的积累就从这里开始吧!-程序员宅基地

文章浏览阅读53次。开篇只能说惭愧,在软件行业混迹了近8年,也过而立之年,才开始自己技术博客的历程。从小语文就不好,所以一直以此为借口总没有开始写些什么。到后来发现,这种借口导致自己养成不总结->懒思考的臭毛病,直接导致了自己的积累也较少,这种习惯和现象非常可怕。所以决心从今天起,把自己的所学所想在这里记录下来。也希望能借助这个平台和大家分享,交流,在技术上不断磨练、雕琢自己!来这...

ShardingSphere-JDBC的 SPI主键生成策略_shardingsphere keygenerator-程序员宅基地

文章浏览阅读2.6k次。ShardingSphere主键生成策略就是使用雪花算法和UUID两种方式。这两种主要就是通过SPI的方式实现,其主要目的也是为了好扩展,也可以自行实现接口,自定义主键生成策略。插入日志输出:_shardingsphere keygenerator

设置textarea不可拖动_antd 大文本框禁止拖拽-程序员宅基地

文章浏览阅读3.1w次,点赞2次,收藏8次。默认情况下,我们将鼠标移动到textarea的右下角时发现文本域是可以通过拖动的方式改变其大小的,这会影响我们原本的页面布局。 若想设置其不可拖动,可为其添加如下属性:_antd 大文本框禁止拖拽

python的强大功能_Python 3.8刚刚发布!一分钟了解新版本的强大功能!-程序员宅基地

文章浏览阅读92次。今天Python3.8发布啦,新版本添加了很多全新功能,也表明Python的版本之路前进了一大步,小编整理了新版本的几个主要更新,为大家做详细解读!顺便一提,导致Python之父龟叔愤然离职的赋值表达式功能还是上线了~新增赋值表达式PEP 572的标题是赋值表达式,也叫做「命名表达式」,不过它现在被广泛的别名是「海象运算符」(The Walrus Operator)。因为:=很像海象「眼睛小,长着..._python sys.addaudithook

python的gdal库,读取tif影像为DataFrame,或将DataFrame转为tif_python gdal tif-程序员宅基地

文章浏览阅读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

MSVC和gcc得到不同结果_拔剑-浆糊的传说_新浪博客-程序员宅基地

文章浏览阅读47次。写了个小程序,在MSVC 2008 和 gcc 3.4.4 ( under cygwin)下面跑了一下,发现结果不一样。 gcc 3.4.4: 1 1 gcc 4.5.2 2 2 MSVC: ..._msvc 不同版本 运算结果不同