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 ...
Collapse
 
chasm profile image
Charles F. Munat

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.

Collapse
 
devrohit0 profile image
Rohit Sharma

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.

Collapse
 
chasm profile image
Charles F. Munat

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.

Collapse
 
kalpitj86 profile image
Kalpit Jain

Very well explained rohit πŸ‘πŸ‘

Collapse
 
devrohit0 profile image
Rohit Sharma

Thanks Kalpit..

Collapse
 
dprincecoder profile image
Dprincecoder

Great code and explanation

Collapse
 
devrohit0 profile image
Rohit Sharma

Thanks Dprincecoder

Collapse
 
michael_osas profile image
Michael Osas

Very nice postπŸ‘πŸΌ
I remember struggling with this feature on an image processing app some months ago.

Collapse
 
devrohit0 profile image
Rohit Sharma

Thanks Michael

Collapse
 
amircahyadi profile image
Amir-cahyadi

Nice sir πŸ‘

Collapse
 
devrohit0 profile image
Rohit Sharma

Thanks Amir

Collapse
 
ralphsunny114 profile image
Ugo Sunday Raphael • 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.

Collapse
 
vulcanwm profile image
Medea

well explained, but does this not work on mobile?

Collapse
 
devrohit0 profile image
Rohit Sharma

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.

Collapse
 
vulcanwm profile image
Medea

Ah it does, this is great!

Thread Thread
 
devrohit0 profile image
Rohit Sharma

Thanks Medea

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
codeofrelevancy profile image
Code of Relevancy

Thank you for this article..

Collapse
 
mizouzie profile image
Sam

Cool little feature and very nicely explained. I hope to use something based on this one day! Thanks!

Collapse
 
devrohit0 profile image
Rohit Sharma

Thank you for your kind words! I'm glad you found the feature and explanation helpful.

Collapse
 
louiecodes profile image
L O U I S

Great explanation, I'll try it out!