Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of react-dnd how to achieve drag and drop, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this react-dnd article on how to achieve drag and drop. Let's take a look.

Implementation method: 1, using "import {DndProvider} from 'react-dnd'" to define a draggable range; 2, using "import {useDrag} from' react-dnd'" to wrap the DragSource around the component, so that it can be dragged.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

How to implement drag and drop in react-dnd

React DnD is a set of React high-level components created by React and Redux core author Dan Abramov, which can help build complex drag-and-drop interfaces while keeping the components separate.

Requirements of React DnD

HTML5 drag and drop API is used by default, but it is supported

Do not directly operate DOM

Decoupling DOM from source and target of drag and drop

Incorporate the idea of stealing type matching and data transfer in HTML5 drag and drop

Characteristics of React DnD

Focus on dragging and do not provide off-the-shelf components

React DnD provides a powerful set of primitives, but it does not contain any off-the-shelf components, but instead wraps the user's components and injects props. It is at a lower level than jQuery UI, focusing on making drag-and-drop interactions correct, while leaving visual effects such as coordinate restrictions to the user. This is actually a principle of separation of concerns. For example, React DnD does not intend to provide sortable components, but users can quickly develop any custom orderable components based on it.

Unidirectional data flow

Declarative rendering similar to React, and unidirectional data flow architecture like redux, actually using Redux internally

Hides the problems of the underlying API of the platform

HTML5 drag and drop API is full of pitfalls and browser inconsistencies. React DnD handles them internally for you, so users can focus on developing applications rather than solving browser problems.

Scalable and testable

React DnD provides HTML5 drag-and-drop API encapsulation by default, but it also allows you to provide a custom "backend". You can create custom DnD backends based on touch events, mouse events, or other content. For example, the built-in simulation backend allows you to test the drag-and-drop interaction of components in a Node environment.

Ready for the future.

React DnD does not export mixins and is equally valid for any component, whether they are created using the ES6 class, createReactClass, or other React framework. And API supports the ES7 decorator.

Examples are as follows:

1.1. Use DndProvider to define a range that can be dragged

/ * * @ Author: muge * @ Date: 2021-12-04 16:59:25 * @ LastEditors: Please set LastEditors * @ LastEditTime: 2021-12-08 14:24:47 * / import React, {useState} from 'react';import {DndProvider} from' react-dnd';import {HTML5Backend} from 'react-dnd-html5-backend';import SourceBox from'. / TargetBox';import TreeBox from'. / TreeBox' Const item: any [] = [{id: 1, name: 'muge',}, {id: 2, name:' muxi',}, {id: 3, name: 'mugege',},]; const Container = () = > {/ / current drag item const [currentList, setCurrentList] = useState ({}) Return (/ / similar to redux data transfer requires dragging source component list in the outermost package object-tree {/ * list drag source * /} {item.map ((itemz: any, index: number) = > ())} {/ * Note Instead of directly setting the drag of the tree component as a whole, extract a component to traverse each item = "Custom rendering * / tree drag source * / drag drop target {/ * drag final drop component * /}) }; export default Container

two。 Use DragSource to wrap the component so that it can be dragged

/ * * @ Author: muge * @ Date: 2021-12-07 14:26:08 * @ LastEditors: Please set LastEditors * @ LastEditTime: 2021-12-08 14:18:52 * / import {useDrag} from 'react-dnd';const ItemTypes = {BOX:' box',} Const style = {border: '1px dashed gray', backgroundColor:' white', padding: '0.5rem 1remand, marginRight:' 1remand, marginBottom: '1remand, cursor:' move',} Const SourceBox = ({item, setCurrentList}: any) = > {const [{opacity}, drag] = useDrag () = > ({type: ItemTypes.BOX, collect: (monitor) = > ({opacity: monitor.isDragging ()? 0.4: 1,}), item: () = > item / / returns the current list item data canDrag: (monitor) = > {/ / whether to cancel dragging console.log (monitor, 'monitor131') Return true;}, / / end (currentItem, monitor) {/ / monitor.getDropResult (); / / get the data of the container where the dragged object is located / / monitor.didDrop (); / / trigger monitor.didDrop () & & setCurrentList (currentItem) when the current container can place the dragged object to stop dragging / / assign value only when released at container point},}), [],); return ({item.id}-{item.name});}; export default SourceBox

3. Use DropTarget to wrap components and make them react to dragging, hovering, or dropped compatible items.

/ * * @ Author: muge * @ Date: 2021-12-07 14:26:08 * @ LastEditors: Please set LastEditors * @ LastEditTime: 2021-12-08 14:33:08 * / import React from 'react';import {useDrop} from' react-dnd';const ItemTypes = {BOX: 'box',}; const style: any = {border:' 1px solid gray', height:'15 remand, width:'15 remand, padding:'2 remand, textAlign: 'center',} Const TargetBox = ({currentList}: any) = > {const [{isActive, isOver, canDrop}, drop] = useDrop (()) = > ({accept: ItemTypes.BOX, collect: (monitor) = > ({isActive: monitor.canDrop () & monitor.isOver (), isOver: monitor.isOver (), canDrop: monitor.canDrop (),}), / / hover: (item, monitor) = > {/ / console.log (item, 'item') / / console.log (monitor, 'monitor'); / /},})); / / console.log (isOver,' isOver'); / / console.log (canDrop, 'canDrop'); return ({isActive? 'Release to drop':' Drag item here'} {JSON.stringify (currentList)! ='{}'? JSON.stringify (currentList): 'current item'});}; export default TargetBox; 's article on "how react-dnd implements drag and drop" ends here. Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to achieve drag and drop in react-dnd". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.