Few days back, I was working on a side project and I was required to create a Drag N Drop feature like Scratch, then I read a lot about this Drag n Drop feature.
In this post, I will be showing 3 Drag n Drop use case, so without wasting the time, let's start.
Here, I have created 2 container div, where we can move our child divs. While dragging we will store id of the child in DataTransfer Object and after dropping we will fetch the id from the DataTansfer Object then it will the node will be appended in the dropped container.
Similarly, I have created 2 container divs, where we can move the child, but when we drop the child, it is copy-pasted instead of cut-paste.
When it is redropped in the previous container, it is deleted.
Here, we have 1 container and we can swap (left to right) nodes.