Mastering Drag N Drop API in HTML & JS 😎

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 😇

Thanks to Web.dev & W3Schools