DEV Community

Cover image for Drag and Drop Kanban board from scratch with React ๐Ÿ”ฅ

Drag and Drop Kanban board from scratch with React ๐Ÿ”ฅ

Ahmed on December 25, 2023

We all used those Kanban-style todo or task management apps where there are columns for each stages of a tasks and we can drag and drop tasks from ...
Collapse
 
jorensm profile image
JorensM • Edited

Great article, thanks! I'm wondering though what is the current browser support for this API? The MDN docs don't say anything abou that.

Edit: it looks like according to caniuse.com, the support is mostly good except on some less popular mobile browsers.

Collapse
 
nasif2ahmed profile image
Ahmed

All up to date modern desktop browsers I tested supports it.
But I found than in mobile browsers, it doesn't work as expected with the same code. I will have to look into it. Thanks for the heads up.

Collapse
 
samfelgar profile image
Samuel Felipe Gacia

Great article! I followed it but using Vue. Here's the repo if anyone is interested: repo.

Collapse
 
nasif2ahmed profile image
Ahmed

Excellent work friend ๐Ÿ‘

Collapse
 
rojansr profile image
Rojan Rai

Great stuff, did the same way back some months ago but then found that it doesn't work on mobile devices. So have to rely on other js libraries.

Collapse
 
nasif2ahmed profile image
Ahmed

Yes I faced problem in mobile devices too. I think there is some way to fix it. I am working on it.
Other js libraries too had to manually implement it didn't they ? ๐Ÿ˜Š

Collapse
 
random_ti profile image
Random • Edited

Great Article Hassan, But if you show live demo with code-pen embedding it would be more helpful.

Collapse
 
nasif2ahmed profile image
Ahmed

Thanks for the suggestion. I will try to do that from next time. ๐Ÿ™‚

Collapse
 
rittschapp profile image
Philip Rittscher

Great article. One minor note that your function name was missing "On"

function handleDragOver(e: React.DragEvent)

Collapse
 
nasif2ahmed profile image
Ahmed

Thanks for pointing it out :D

Collapse
 
kansoldev profile image
Yahaya Oyinkansola

Nice article Ahmed, it was a good read. I want to ask, how did you make a gif video in this your article?, I am trying to do the same, but don't know how

Collapse
 
nasif2ahmed profile image
Ahmed • Edited

Thanks. I just recorded part of the screen with windows' snipping tool and then converted that video to gif using this
Hope it helps :)

Collapse
 
kansoldev profile image
Yahaya Oyinkansola

Okay thank you very much

Collapse
 
vechet profile image
Chuo Vechet

Good sharing.

Collapse
 
devalienbrain profile image
HASSAN - Alien Brain

Great article ...

Collapse
 
nasif2ahmed profile image
Ahmed

Thank you

Collapse
 
ngud0119 profile image
Ngu.D.@ce

Awesome