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.
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
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
@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)
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
The most simple and easy to understand explanation. Salute 🫡🫡 your teaching skill.
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.
Excellent clarity and just what is needed ! Many thanks. 👍👍
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!
Video is a great help - good luck getting more subscribers
Watching from UK
This has helped me a lot.
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 !!
Very helpful and easy to understand, nice video
Thanks a lot.
you explained it amazingly.
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
thank you for such a wonderful tutorial, it helped me a lot.
What a useful video! Thank you very much 🎉
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
Many thanks
This came in handy. Thanks
You did great in this video , thanks a lot 😊
Thank you for your smart video keep up the good work
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
Is there any way to add a button in the Task component to delete a task with an onClick event?
Thx a lot bro!
Thx!
Thank you, you saved me
Thank but if you drag and dropping components stored inside the database
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
as soon as drag and perform make api request using redux save new data after dandd
why i have an error in props like this 'tasks' is missing in props validation
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?