introduce

React DnD is a set of React advanced components. When using React DnD, you only need to use the corresponding API to wrap the target component to implement the function of dragging or receiving dragged elements.

DragSource

DragSource is used to wrap components that need to be dragged so that they can be dragged

use

import { DragSource } from 'react-dnd'

const spec = {
    
	beginDrag(props, monitor, component) {
		return props;
	}

	endDrag(props, monitor, component) {
	    returnprops; . } canDrag(props, monitor) { ... } isDragging(props, monitor) { ... }}const collect = (connect, monitor) = > ({
	// This returns an object that will inject properties of the object into the props of the component. These attributes need to be defined by yourself.
	connectDropTarget: connect.dropTarget(),
	connectDragPreview: connect.dragPreview,
	isDragging: monitor.isDRagging
})

class MyComponent {
  / *... * /
}

export default DragSource(type, spec, collect)(MyComponent)
Copy the code

Parameters,

  • Type: Drag type. A drag can be received only when the type of the element that receives the drag is the same. The type of type can be string, symbol, or a function to return other props for the component. Mandatory.
  • Spec: method object for drag events. How drag sources react to drag events. Mandatory.
  • Collect: Inject the information required during the drag and drop process into the props of the component, and receive the two parameters connect and monitor. This parameter is mandatory.
Methods in the spec object

You can use the props, monitor, and Component parameters as required:

  • BeginDrag (props, monitor, Component) : The event triggered when the drag starts, must.

  • EndDrag (props, monitor, Component) : Optional event triggered when dragging ends.

  • CanDrag (props, monitor) : Optional event that can be dragged or not.

  • IsDragging (props, monitor) : Optional event triggered when dragging.

collect

Collect function, including connect and monitor parameters. The collect function returns an object that is injected into the props of the component. All properties returned by Collect can be retrieved using this.props.

  • Connect: Has two built-in methods, dragSource() and dragPreview().
  1. DragSource () returns a method to which the Source component is passed. This method connects the Source DOM to React DnD Backend.
  2. DragPreview () returns a method that you can pass in as a node for dragPreview.
  • Monitor: a common method used to query the current drag and drop status
methods meaning
canDrag() Defines whether it can be dragged, if true is returned
isDragging() Is being dragged, returns true to indicate being dragged
getItemType() Returns the drag component type
getItem() Returns the currently dragged object, which must return an object specified in beginDrag(), or null
getDropResult() To return a drag object, you must return an object specified in drop() in DropTarget, otherwise null is returned
didDrop() Use it in endDrag() to test if any drop target has been handled

DropTarget

DropTarget is used to wrap a component that accepts a drag object and causes it to react accordingly

import { DropTarget } from 'react-dnd'

const spec = {
	drop(props, monitor, component) {
	    // Returns the id of the element that accepts the drag
		return { id: props.id };
	}

	hover(props, monitor, component) {
	    returnprops; . } canDrop(props, monitor) { ... }}const collect = (connect, monitor) = > ({
	connectDropTarget: connect.dropTarget()
})

class MyComponent {
  / *... * /
}

export default DropTarget(types, spec, collect)(MyComponent)
Copy the code
Methods in the spec object

You can use the props, monitor, and Component parameters as required:

  • Drop (props, monitor, Component) : Event triggered when a component is dropped. This is optional. You can return undefined or plain objects. If an object is returned, it becomes the result of the placement, which can be obtained using monitor.getDropresult ().

  • Hover (props, monitor, Component) : An optional event to which the component responds when above the DropTarget.

  • CanDrop (props, monitor) : Optionally, use this to specify whether the drag object can be accepted.

collect
  • Connect: The built-in method dropTarget() corresponds to dragSource(), which returns a method that can connect drop target to React DnD Backend.
  • Monitor: this method is used to query the current drag and drop status
methods meaning
canDrop() Defines whether objects can be dragged or dropped if true is returned
isOver(options) Whether the source hover on target
getItemType() Returns the drag component type
getItem() Returns the currently dragged object, which must return an object specified in beginDrag(), or null
getDropResult() To return a drag object, you must return an object specified in drop() in DropTarget, otherwise null is returned
didDrop() Use it in endDrag() to test if any drop target has been handled

DndProvider

Use DndProvider to wrap the root component of your application to enable React DnD.

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

export default class YourApp {
  render() {
    return (
      <DndProvider backend={HTML5Backend}>
        /* Your Drag-and-Drop Application */
      </DndProvider>)}}Copy the code
  • Backend: React DnD backend. You are advised to use HTML5Backend that comes with React DnD. This parameter is mandatory.