Introduction
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.
Getting Started
In this post, I will be showing 3 Drag n Drop use case, so without wasting the time, let's start.
Drag n Drop Simple
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.
Drag, Drop, Copy n Delete
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.
Drag, Drop n Swap
Here, we have 1 container and we can swap (left to right) nodes.
Top comments (0)