This content originally appeared on DEV Community and was authored by Abhishek Raj
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.
Connect Me @ Linkedin Github Twitter Youtube ?
This content originally appeared on DEV Community and was authored by Abhishek Raj
Abhishek Raj | Sciencx (2021-07-25T17:19:50+00:00) Mastering Drag N Drop API in HTML & JS ?. Retrieved from https://www.scien.cx/2021/07/25/mastering-drag-n-drop-api-in-html-js-%f0%9f%98%8e/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.