react-dnd 拖放组件

react-dnd

官网地址：https://react-dnd.github.io/react-dnd/docs/api/use-drop

用途：react-dnd 是一组 React 高阶组件，使用的时候只需要使用对应的 API 将目标组件进行包裹，即可实现拖动或接受拖动元素的功能。

安装：

yarn add react-dnd react-dnd-html5-backend immutability-helper

// 或NPM
npm install --save react-dnd react-dnd-html5-backend immutability-helper

API:

####1. useDrag :用于将当前组件用作拖动源的钩子。

参数：

• item：必填。一个普通的JavaScript对象，描述了要拖动的数据
• previewOptions： 可选的。描述拖动预览选项的普通JavaScript对象。
• options: 可选的。一个普通的对象。
• begin(monitor)： 可选的。拖动操作开始时触发。
• end(item, monitor)： 可选的。当拖动停止时，end被调用。
• canDrag(monitor)： 可选的。使用它来指定当前是否允许拖动。
• isDragging(monitor)： 可选的。默认情况下，只有启动拖动操作的拖动源才被视为拖动。
• collect： 可选的。收集功能。它应该返回道具的简单对象以返回注入到组件中。它接收两个参数，monitor和props。
• spec：必填。一个普通的JavaScript对象，上面有一些允许的方法。它描述了拖动源如何对拖放事件做出反应。

返回值：

• Index 0：包含来自collect函数的收集属性的对象。如果collect未定义函数，则返回一个空对象。
• Index 1：拖动源的连接器功能。这必须附加到DOM的可拖动部分。
• Index 2：用于拖动预览的连接器功能。这可以附加到DOM的预览部分。

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;

2. useDrop: 使用当前组件作为放置目标的钩子。

参数：

• accept：必填。
• options： 可选的。一个普通的对象。
• drop(item, monitor)： 可选的。当兼容项目放在目标上时调用。
• hover(item, monitor)： 可选的。将项目悬停在组件上时调用。
• canDrop(item, monitor)： 可选的。使用它来指定放置目标是否能够接受该物品。如果要始终允许它，则只需忽略此方法。
• collect： 可选的。收集功能。它应该返回道具的简单对象以返回注入到组件中。它接收两个参数，monitor和props。

返回值：

• Index 0：包含来自collect函数的收集属性的对象。如果collect未定义函数，则返回一个空对象。
• Index 1：放置目标的连接器功能。这必须附加到DOM的放置目标部分。

import { useDrop } from 'react-dnd'

function myDropTarget(props) {
  const [collectedProps, drop] = useDrop({
    accept,
  })

  return <div ref={drop}>Drop Target</div>
}

3. useDragLayer: 用于将当前组件用作拖动层的钩子。

参数：

• collect：必填。收集功能。它应该返回道具的简单对象以返回注入到组件中。它接收两个参数，monitor和props。

返回值：

• 从collect函数收集的属性的对象。

import { useDragLayer } from 'react-dnd'

function DragLayerComponent(props) {
  const collectedProps = useDragLayer(spec)
  return <div>...</div>
}

4. DndProvider: DndProvider组件为您的应用程序提供React-DnD功能。必须通过backend道具将其注入后端，但是也可以将其注入window对象。

参数：

• backend：必填。一个React DnD后端 除非您要编写自定义代码，否则您可能要使用React DnD随附的HTML5后端。
• context： 可选的。用于配置后端的后端上下文。这取决于后端的实现。
• options： 可选的。用于配置后端的选项对象。这取决于后端的实现。

返回值：

import Backend from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

export default class YourApp {
  render() {
    return (
      <DndProvider backend={Backend}>
        /* Your Drag-and-Drop Application */
      </DndProvider>
    )
  }
}

5. DragPreviewImage: 将HTML Image元素呈现为断开的拖动预览的组件。

Props 参数：

• connect：必填。拖动预览连接器功能

import { DragSource, DragPreviewImage } from 'react-dnd'

function DraggableHouse({ connectDragSource, connectDragPreview }) {
  return (
    <>
      <DragPreviewImage src="house_dragged.png" connect={connectDragPreview} />
      <div ref={connectDragSource}></div>
    </>
  )
}
export default DragSource(
  /* ... */
  (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
  }),
)

监控状态

1.DragSourceMonitor 是传递给的收集功能的对象DragSource。它的方法使您可以获得有关特定拖动源的拖动状态的信息。绑定到该监视器的特定拖动源在下面称为监视器的所有者。

Methods

• canDrag()：true如果没有正在进行的拖动操作，并且所有者的canDrag()返回true或未定义，则返回。
• isDragging()：返回true是否正在进行拖动操作，并且所有者发起了拖动，或者isDragging()定义了其并返回true。
• getItemType()：返回一个字符串或一个ES6符号，用于标识当前拖动项目的类型。null如果没有项目被拖动，则返回。
• getItem()：返回表示当前拖动项目的普通对象。每个拖动源都必须通过从其beginDrag()方法返回一个对象来指定它。null如果没有项目被拖动，则返回。
• getDropResult()：返回表示最后记录的放置结果的普通对象。放置目标可以选择通过从其drop()方法返回对象来指定它。drop()自下而上为嵌套目标调度链时，任何从其显式返回其自身结果的父对象将drop()覆盖该子对象先前设置的子对象放置结果。null如果在outside调用则返回endDrag()。
• didDrop()true如果某个放置目标已经处理了放置事件，false则返回；否则返回。即使目标未返回放置结果，也didDrop()将返回true。在内部使用它endDrag()来测试是否有任何放置目标已处理了放置。false如果在outside调用则返回endDrag()。
• getInitialClientOffset()：返回{ x, y }当前拖动操作开始时指针的客户端偏移量。null如果没有项目被拖动，则返回。
• getInitialSourceClientOffset()：返回{ x, y }当前拖动操作开始时拖动源组件的根DOM节点的客户端偏移量。null如果没有项目被拖动，则返回。
• getClientOffset()：返回{ x, y }正在进行拖动操作时指针的最后记录的客户端偏移量。null如果没有项目被拖动，则返回。
• getDifferenceFromInitialOffset()：返回{ x, y }当前拖动操作开始时指针最后记录的客户端偏移量与客户端偏移量之间的差。null如果没有项目被拖动，则返回。
• getSourceClientOffset()：{ x, y }根据当前拖动操作开始时的位置以及移动差异，返回拖动源组件的根DOM节点的预计客户端偏移量。null如果没有项目被拖动，则返回。

2.DropTargetMonitor 是传递给的收集功能的对象DropTarget。它的方法使您可以获得有关特定放置目标的拖动状态的信息。绑定到该监视器的特定放置目标在下面称为监视器的所有者。

Methods

• canDrop()：返回true是否正在进行拖动操作，并且所有者的canDrop()返回true或未定义。
• isOver(options)：返回true是否正在进行拖动操作，并且指针当前悬停在所有者上。您可以选择通过{ shallow: true }以严格检查是否只悬停了所有者，而不是嵌套目标。
• getItemType()：返回一个字符串或一个ES6符号，用于标识当前拖动项目的类型。null如果没有项目被拖动，则返回。
• getItem()：返回表示当前拖动项目的普通对象。每个拖动源都必须通过从其beginDrag()方法返回一个对象来指定它。null如果没有项目被拖动，则返回。
• getDropResult()：返回表示最后记录的放置结果的普通对象。放置目标可以选择通过从其drop()方法返回对象来指定它。drop()自下而上为嵌套目标调度链时，任何从其显式返回其自身结果的父级将drop()覆盖子级先前设置的放置结果。null如果在outside调用则返回drop()。
• didDrop()true如果某个放置目标已经处理了放置事件，false则返回；否则返回。即使目标未返回放置结果，也didDrop()将返回true。在内部使用它drop()来测试是否有任何嵌套的放置目标已经处理了放置。false如果在+ outside调用则返回drop()。
• getInitialClientOffset()：返回{ x, y }当前拖动操作开始时指针的客户端偏移量。null如果没有项目被拖动，则返回。
• getInitialSourceClientOffset()：返回{ x, y }当前拖动操作开始时拖动源组件的根DOM节点的客户端偏移量。null如果没有项目被拖动，则返回。
• getClientOffset()：返回{ x, y }正在进行拖动操作时指针的最后记录的客户端偏移量。null如果没有项目被拖动，则返回。
• getDifferenceFromInitialOffset()：返回{ x, y }当前拖动操作开始时指针的最后记录的客户端偏移量与客户端偏移量之间的差。null如果没有项目被拖动，则返回。
• getSourceClientOffset()：{ x, y }根据当前拖动操作开始时的位置以及移动差异，返回拖动源组件的根DOM节点的预计客户端偏移量。null如果没有项目被拖动，则返回。

3.DragLayerMonitor 是传递给的收集功能的对象DragLayer。它的方法使您可以获得有关全局拖动状态的信息。

Methods

• isDragging()：返回true是否正在进行拖动操作。false否则返回。
• getItemType()：返回一个字符串或一个ES6符号，用于标识当前拖动项目的类型。null如果没有项目被拖动，则返回。
• getItem()：返回表示当前拖动项目的普通对象。每个拖动源都必须通过从其beginDrag()方法返回一个对象来指定它。null如果没有项目被拖动，则返回。
• getInitialClientOffset()：返回{ x, y }当前拖动操作开始时指针的客户端偏移量。null如果没有项目被拖动，则返回。
• getInitialSourceClientOffset()：返回{ x, y }当前拖动操作开始时拖动源组件的根DOM节点的客户端偏移量。null如果没有项目被拖动，则返回。
• getClientOffset()：返回{ x, y }正在进行拖动操作时指针的最后记录的客户端偏移量。null如果没有项目被拖动，则返回。
• getDifferenceFromInitialOffset()：返回{ x, y }当前拖动操作开始时指针的最后记录的客户端偏移量与客户端偏移量之间的差。null如果没有项目被拖动，则返回。
• getSourceClientOffset()：{ x, y }根据当前拖动操作开始时的位置以及移动差异，返回拖动源组件的根DOM节点的预计客户端偏移量。null如果没有项目被拖动，则返回。

总结：react-dnd 是一款非常简单的拖动组件，就5个顶级接口，3个监控接口（非定制要求，基本都不用）；
但它需配合其他插件使用：react-dnd-html5-backend 、 immutability-helper