DEV Community

loading...
Cover image for Mastering Drag N Drop API in HTML & JS ๐Ÿ˜Ž

Mastering Drag N Drop API in HTML & JS ๐Ÿ˜Ž

Abhishek Raj
Learning something worth sharing....
ใƒปUpdated on ใƒป1 min read

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

Discussion (0)