Drag and drop the use of the react-DND component

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

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

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.