DEV Community

How to create a Drag and Drop interface using Vanilla JS

Rohit Sharma on February 20, 2023

Hi! I'm back after a long break with a new post on how to create a Drag and Drop interface using Vanilla JS. GitHub Repo Let's have look what we ...

Read full post

Charles F. Munat • Feb 22 '23

Nice. An excellent and clear explanation, sadly somewhat diminished by the inclusion of the irrelevant Tailwind dependency, as if we can do vanilla JS, but not vanilla CSS. Ironic.

Note: your JS is improperly formatted and initially I thought that lines 2-26 were inside a function. Took me a moment. Maybe remove the indent?

Definitely one of the clearest and most useful posts I've seen here in a while.

Rohit Sharma • Feb 23 '23

Thanks Charles for your feedback and pointing out the formatting issue ,it's been fixed now.
And for not using Vanilla CSS, I'll say, for a long time I'm not using vanilla CSS instead of that I'm using Tailwind CSS but from the next time I'll definitely use vanilla CSS with vanilla JS.

Charles F. Munat • Feb 23 '23

Cool. I'm using Astro and TypeScript to generate vanilla JS/CSS/HTML -- no browser-side dependencies at all, but I still get types and components.

Kalpit Jain • Feb 20 '23

Very well explained rohit 👍👍

Rohit Sharma • Feb 20 '23

Thanks Kalpit..

Dprincecoder • Feb 23 '23

Great code and explanation

Rohit Sharma • Feb 23 '23

Thanks Dprincecoder

Michael Osas • Feb 22 '23

Very nice post👍🏼
I remember struggling with this feature on an image processing app some months ago.

Rohit Sharma • Feb 23 '23

Thanks Michael

Amir-cahyadi • Feb 24 '23

Nice sir 👍

Rohit Sharma • Feb 24 '23

Thanks Amir

Medea • Feb 20 '23

well explained, but does this not work on mobile?

Rohit Sharma • Feb 20 '23

Well, this is working on my mobile.
You just need to long press on the draggable then you'll be able to drag it.
Try this way, Hope it will work.

Medea • Feb 20 '23

Ah it does, this is great!

Rohit Sharma • Feb 20 '23

Thanks Medea

Ugo Sunday Raphael • Feb 26 '23 • Edited

Good work. But right inside the Dropbox, can the text in each box be edited? I'm looking at a scenario where the boxes are list of products, then, after drag n drop, users can edit each quantity of product, to get a new combo. Please, I'll need your help or advice on this, if you understand it. Thanks.