Achieve Drag & Drop in react by building a GUI

#react #webdev #beginners #javascript

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.

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

Draggable

Draggable is the another things that is imported from react-beautiful-dnd which can be used to wrap the items that are draggable

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.

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.

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.

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

react-beautiful-dnd

check my dev projects on github
Follow me on twitter
connect with me on linkedIn
check my styles on codepen

Thanks for your time
Happy coding ! Keep Sharing
Stay Safe