Achieve Drag & Drop in react by building a GUI

Achieve Drag & Drop in react by building a GUI:

 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
Enter fullscreen mode Exit fullscreen mode

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).


It uses the DragDropContext wrapper where the things that needs the D&D feature must be inside that wrapper


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 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.


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  but that won’t give the result as crisp like any packages could do

from Tumblr

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s