Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
javascript
drag and drop api
web development

Mastering Drag N Drop API in HTML and JS

Abhishek Raj

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 n Drop Simple Implementation

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, Copy & Delete Implementation

Drag, Drop, n Swap

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

Drag, Drop & Swap Implementation

Connect with me on Linkedin, Github, Twitter, and Youtube. ๐Ÿ˜‡

Thanks to Web.dev & W3Schools

RELATED TAGS

html
javascript
drag and drop api
web development
RELATED COURSES

View all Courses

Keep Exploring