Mastering Drag N Drop API in HTML and JS

Introduction

A few days back, I was working on a side project, and I was required to create a Drag N Drop feature like Scratch. I then read a lot about this Drag n Drop feature.

Getting Started

In this post, I will be showing 3 Drag n Drop use cases, so without wasting the time, let’s start.

Simple Drag n Drop

Here, I created 2 container divs, where we can move our child divs. While dragging, we will store the ID of the child in the DataTransfer Object. After dropping, we will fetch the ID from the DataTansfer Object, and then 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 dropped in the previous container, it is deleted.

Drag, Drop, n Swap

Here, we have 1 container, and we swap the node with the node we are hovering over.