Achieve Drag & Drop in react by building a GUI
Tags: react, webdev, beginners, javascript
Published: 2020-11-17 05:33:22

**Drag and drop (D&D)** is one of the feature that users of the application like to have and developers feels difficult to implement.

So the best experience a site can give a user is drag and drop specially when your application has things like

      --> list of things to go
      --> work manager
      --> project management

Sites like asana ,atlassian, google task are some of the notable sites that uses the D&D feature the most 

These things must be followed carefully while implementing D&D 
 * *flickers*
 * *smothness*

No worries as usall there are n number of libraries that takes care of the above things for you.

One of my favourite package is **react-beautiful-dnd** by atlassian. It is one of the package that does the work quite simple.  
![gif](https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif)

It is the first choice when your requirement is based on the dragabble list of items as in the above gif. I also implemented the other thing using this package (i'll show u latter). 

###DragDropContext
It uses the *DragDropContext* wrapper where the things that needs the D&D feature must be inside that wrapper
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3cs50eg9u8x3a0ktyaow.png)

###Draggable 
Draggable is the another things that is imported from react-beautiful-dnd which can be used to wrap the items that are draggable  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/efiv3xboa02ciup37ahh.png)
*draggableId* should be unique it is the representation of the item that is dragged currently.

###Droppable 
Droppable is the place where the dragged items are dropped you can see in the gif that the items are moved from right to left and left to right.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/28zebq31exxkcxjqwzcw.png)
*droppableId* is used to identify the place where the items are dropped.It can used as a string for better clarification.

###onDragEnd 
You can see the onDragEnd function that is used in first image.It is the main function that used to fullfil the D&D functionality. This function receives a parameter which has the information about source , destination , draggableId which can be used to find from which source to destination the item is moved. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jtsxjvwg62m8glc6l6pz.png)
 

Ok is this only for list of items ? for what other it can help ??

It depends on how you play with the given stuff's. Here is the GUI builder which I developed using react-beautiful-dnd.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/clzlsvdxi4is3ingi8u5.png)

So instead of just list items the GUI builder will generate the html elements that is selected from the left sidebar . Each side has it's own D&D feature.

Each side is wrapped under both **Droppable** & **Draggable** since both need act as draggable and droppable area.

Both **Draggable & Droppable** follows the render props pattern providing the props like *provided, snapshot* you need not to worry about these props just spread and pass them accordinly to the wrapper as in the below example.

That's it by this D&D achieved easily in react using react-beautiful-dnd .

*Note: Even without any other packages drag and drop can be achieved by doing `<htmltag draggable />` but that won't give the result as crisp like any packages could do*

Check the complete project [here](https://github.com/karthick3018/react-gui) 

[react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)

 ------------
 *check my dev projects on* [github](https://github.com/karthick3018)
 *Follow me on* [twitter](https://twitter.com/Karthick_R_30)
*connect with me on* [linkedIn](https://www.linkedin.com/in/karthick-raja-dev/)
*check my styles on* [codepen](https://codepen.io/karthick30)

-------------
*Thanks for your time*
*Happy coding ! Keep Sharing*
*Stay Safe*