Dude I can't even describe to you how much you have helped me. Thank you so much for such a great tutorial, I loved your explanation for using it and the other options. Everything was clear and simple, man you just got a new subscriber.
What an amazing tutorial, simple and effective. Thank you very much, it works perfectly and I could implement an important feature with it. Thank you veryyyyyyyyyy much men
00:04 DND kit is recommended for easy and actively maintained drag and drop functionality in React. 02:00 Setting up DND context and defining collision detection 04:04 Implementing drag and drop functionality in DND context. 06:18 Implement drag and drop functionality using DND kit 08:41 Attaching reference and styling element for drag and drop 10:50 Implementing drag and drop for task rearrangement 12:51 Adding different sensors and using them for drag and drop functionalities 15:13 Adding drag and drop functionality using React's dnd-kit
Good going creator. Can you please teach the basics of coding to Gen X or Bloomers. That would be an interesting video and would help slightly older people like me to understand coding.
Hello, thanks for the tutorial. But i have an issue, i can't add a clickable element to the draggable element. The onclick doesn't work. For example adding a delete button to a task. Thanks
@akshatdubey4421 @Code_Complete i think the click handler from useSortable is preventing the default click events, i need to go back through the end of the video to check if there's anything i've missed, but i don't think it's a problem with the steps in the tutorial
the solution that worked for me is to use an activation constraint, i don't know if that would work if you have a text input, there might be another way to handle that, such as specifying a separate activator node ref
![Multiple List Drag and Drop in React [Easiest Way]](http://i.ytimg.com/vi/CJycVlSuaPg/mqdefault.jpg)
![Multiple List Drag and Drop in React [Easiest Way]](/img/tr.png)
Join our Discord server here! discord.gg/TWBtv5an7N
Link is invalid or expired
@@devT44 My bad! Updated the link👍
Hi @@Code_Complete
I am trying to move first item to second item I can't see visual effect of being dragged and dropped
Dude I can't even describe to you how much you have helped me. Thank you so much for such a great tutorial, I loved your explanation for using it and the other options. Everything was clear and simple, man you just got a new subscriber.
The most simple and easy to understand explanation. Salute 🫡🫡 your teaching skill.
Thank you soo much for the support
Thanks for your contents! To be honest, the "touch-action:none" in the CSS is crucial for mobile!
Excellent clarity and just what is needed ! Many thanks. 👍👍
What an amazing tutorial, simple and effective.
Thank you very much, it works perfectly and I could implement an important feature with it.
Thank you veryyyyyyyyyy much men
Thank god, this channel is there for helping me at right time.
Finally...3rd tutorial I tried and worked for my Next app. Thank you
Thanks! Glad the video helped!
Amazing in struggling to drag and drop components saved inside my database
excellent! thank you for that intro, explaining which package to choose! I liked and subscribed
You are gonna long way man. Keep posting such content🙌
Thank you for posting such an excellent and helpful tutorial. I had no idea how to make a drag and drop in react, but thanks to you I can do it now!
00:04 DND kit is recommended for easy and actively maintained drag and drop functionality in React.
02:00 Setting up DND context and defining collision detection
04:04 Implementing drag and drop functionality in DND context.
06:18 Implement drag and drop functionality using DND kit
08:41 Attaching reference and styling element for drag and drop
10:50 Implementing drag and drop for task rearrangement
12:51 Adding different sensors and using them for drag and drop functionalities
15:13 Adding drag and drop functionality using React's dnd-kit
Thank you so much, so much easy to do it now
Video is a great help - good luck getting more subscribers
Watching from UK
This has helped me a lot.
Very helpful and easy to understand, nice video
Good going creator. Can you please teach the basics of coding to Gen X or Bloomers. That would be an interesting video and would help slightly older people like me to understand coding.
Excellent explanation !!
the video was great, can you make a video for kanbanboard using dndkit without typescript. as all the videos on yt for kanbanboard are in typescript
Great idea! Added it to my list
Thanks a lot.
you explained it amazingly.
thank you for such a wonderful tutorial, it helped me a lot.
Hello, thanks for the tutorial. But i have an issue, i can't add a clickable element to the draggable element. The onclick doesn't work. For example adding a delete button to a task.
Thanks
Try to use "onMouseDown" instead, it works
Thanks a lot, man, you are a legend
What a useful video! Thank you very much 🎉
You did great in this video , thanks a lot 😊
This came in handy. Thanks
Thank you for your smart video keep up the good work
Many thanks
Is there any way to add a button in the Task component to delete a task with an onClick event?
How to drag and drop across columns with same functionality ?
Thx a lot bro!
I like the way you describe the code. Thanks a lot! Anyway can you please record a tutorial for react-beautiful-dnd? thanks!
Glad you liked it! Will add react-beautiful-dnd to my list
Thank you, you saved me
Thx!
Thank but if you drag and dropping components stored inside the database
why i have an error in props like this 'tasks' is missing in props validation
as soon as drag and perform make api request using redux save new data after dandd
thanks a lot
You should have coded this in typescript, in TS things are quite different
.b.i.n.a. .s.a.r.a.n.a. .i.n.f.o.r.m.a.t.i.k.a.
Can someone tell how to persist like if I have data in a database and I want to persist the actual order then how to do that.
give one attribute with values of 1 to n in your database document and use it as id here
good
As soon as I spread the listners over my todo component. It becomes unresponsive. Please help
Does it still happen after you do everything else mentioned in the video? It would be great if you can mention this in the discord server
@akshatdubey4421 @Code_Complete i think the click handler from useSortable is preventing the default click events, i need to go back through the end of the video to check if there's anything i've missed, but i don't think it's a problem with the steps in the tutorial
the solution that worked for me is to use an activation constraint, i don't know if that would work if you have a text input, there might be another way to handle that, such as specifying a separate activator node ref
@@samnewman9863How did you make the restriction?