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
No worries as usall there are n number of libraries that takes care of the above things for you.
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).
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 ??
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
Thanks for your time
Happy coding ! Keep Sharing