ReactDnd and example

Drag and drop an item on the website is very popular, although the drag and drop seems simple, the task to do so is not one or two lines done, it takes a certain logic and some basic knowledge. about dom and browser. The react is divided into components and so is the react using virtual dom, we can also write them based on virtual dom or library. Today’s article I will talk about ReactDnD a fairly popular library, for example: Trello Storify … is also using this library.
Actually, the document part of reactDnD is very confusing, so I’ll write this article through examples and explain the function.

Let’s see this wallet! There are 3 main componets Dustbin, Box, Example and I use React Hook, in the next article I will show you how to use the component class.

Box : Dragged object
Dustbin : Container (drog)
Example : Where the 2 components above

Well before you enter the example, install reactDnD

npm i react-dnd

1. Example

Each box will contain a value passed from the prop, we have 3 component boxes with 3 different names

2. Box

Now I explain each line of code for you.

Like useState (), useRef () …. useDrag () also has two parameters. The first parameter {isDragging, …} includes variables that retrieve values ​​during drag (drag state, end yet, hover …, The second parameter is a reference to the object). drag.
Next are 3 API settings for useDrag:

1. item

This attribute is required in each useDrag, it is an attribute that includes the value of drag ( name ) and type , so the value is simple, and the type is the target that the user wants to drop the example you want to send. The parcel needs to have a type address in the same way that an address of this type is a String .

2. end

When you finish the pull, the event is called as a function. In the above example, the function can access two properties that are item and monitor. Regarding items, it is the attribute I just mentioned above, and monitor is a bit special. Drag and drop has many different states when clicking, holding the mouse, contesting or moving items then the monitor will manage this and tell us which state it is in.

monitor.getDropResult () will return the object to a specific place dropped into API drop () in the Dustbin component, more specifically it is here

3. collect:

As a set of functions, it will return the object or state and be used inside the component. For example, unsuccessful dragging, dragging, hovering, etc. In this example

monitor.isDragging () means that if you are in drag state, it returns true , has not released the mouse or has not acted yet defaulf received false

The following post I will introduce the other function monitor

3. Dustbin

As for Drop, which accepts events from drag, it also has parameters passed and ref used with hook useDrop () .

And it also has API seting for drag and drop operations.

1. accept

Drop side also has a mandatory attribute that accept it takes string value. If the box above (drag) above has a type to determine the address sent, the party also needs to publicize its address matching the address of Box.

2. drop

Declared by a function when the object hit the target is Dustbin, the function will be run, the returned value will be saved by the monitor to show that it has dragged to the demo.

3. collect

This side of the drop has the same collect as the drag, but on each side the drop has the monitor parameter passed to it from the drag.

monitor.isOver () returns fasle if the object is outside the drop zone and true otherwise.

monitor.canDrop () returns true if it is in the process of dragging or dragging into the correct drop zone, and fasle if it has not acted or ended the drop without hitting the target.

There are many other function monitors in the next article I will continue.

4. In summary

That is what you need to know in this example, in the following example I will introduce more. Thank you for your interest in your article