Nice Work MonsterlessonsAcademy; you have no idea I wasted the last 3 weeks trying to learn react beautiful dnd and it lacks documentations. I tried to use chatgpt to learn it, no use.... dnd-kit seems promising but it's like 2 years old only.
Hi Oleksandr, thank you very much. I always wanted to know how page builders (Elementor, or in Shopify...) work with drag&drop, especially how do they save the state (so that when we re-open the page, all the components we built are saved). Do they persist the whole resulting html? Or do they persist a model and re-create the html dynamically out of that model? I'm very curious and would be happy to learn from your experience :)
I have no idea as I never used them. But I assume it is either local storage or API. In a big project it is for sure API as local storage it really limited. Which means which every drag/change/add on client side they send a request to API with information how all elements are located and their positions. Then on page reload this information is loaded from API and elements are positioned accordingly.
Can this functionality also be applied to a grid? I'm currently working on a dashboard project where I need to implement drag-and-drop and resizing for the metrics displayed in the dashboard. I'm using the Grid component from Material UI.
@@MonsterlessonsAcademy I did try using `react-grid-layout` but it works well with class based components and react official documentation doesn't recommend using class components. Will give it a try and I would love to see a video on using it with the Grid. Thank you.
Because nowadays all libs are written with hooks and they are a reusable way to implement things. It's not mandatory but other libs had bad API or were deprecated. For example there is zero sense to use render props approach in React nowadays.
@iamanupambiswas To achieve that, you can create a column named “sort_index” in the database. In your React app, you can create a hidden input with the same name and set its “value” attribute to “index”. When the onDragEnd function is triggered, you can make a call to the database to update all the elements on the list. To avoid calling the database too frequently, it’s recommended to use a debouncing function. Any questions, let me know.
hey thanks for this, i am in a similar issue. I am trying a linktree clone with supabase tables "users" and "links" as a learning experiment. I am using NextJS with Supabase. Right now im at a stage on how do i persist data to display links for a specific user as each user will have its own sorting arrangement. How do you think i should go about it? All links are in "links" table and i get them from the user that requests it accordingly. any help is appreciated.
hey thanks for this, i am in a similar issue. I am trying a linktree clone with supabase tables "users" and "links" as a learning experiment. I am using NextJS with Supabase. Right now im at a stage on how do i persist data to display links for a specific user as each user will have its own sorting arrangement. How do you think i should go about it? All links are in "links" table and i get them from the user that requests it accordingly. any help is appreciated.
WATCH NEXT: React Interview Questions and Answers - Dominate Your Next Interview - ua-cam.com/video/yQHr4opz_N0/v-deo.htmlsi=51b2XP_84GH3q6oF
One of the best dnd kit tutorial on yt.
Thanks ❤
Glad it was helpful!
You saved me thanks a lot. Very good tutorial, well explained. I'm going to sub to see more of your content. Keep the good work !
Awesome, thank you!
Great tutorial! I'm building a Kanban Board, please can you make a video on how to use this kit to drag a task from one column to another?
I will add it to the list of ideas.
thaks for this great tut!!! any typescript version??
Not really, but just convert it to TS
OMG, this is heaven, thank you so much!
You're so welcome!
oh my god this is SO MUCH BETTER than react-dnd
Yeap
on click is not working on draggable item
I encountered the same problem and I used "onMouseDown" instead. It worked.
Thanks for that intro. I wanted to know if drag and drop is possible in reactjs.
You are welcome!
Thanks a lot! That was very helpful.
You're welcome!
Finally found one that works thanks
Glad I could help!
does the dnd-kit not allow normal clicks on the list items ? My click event handlers stopped working after wrapping with Dndcontext
I encountered the same problem and I used "onMouseDown" instead. It worked.
Not bad. Now I'm waiting for the same lesson on Angular ;)
Will come!
Thanks for this! Very helpful.
You're welcome!
@@MonsterlessonsAcademy Thanks alot, this was really good. You deserve a sub 🎉
Nice Work MonsterlessonsAcademy; you have no idea I wasted the last 3 weeks trying to learn react beautiful dnd and it lacks documentations. I tried to use chatgpt to learn it, no use.... dnd-kit seems promising but it's like 2 years old only.
Indeed. Finding a good lib is a pain.
that was super easy
Glad to hear that!
Hi Oleksandr, thank you very much.
I always wanted to know how page builders (Elementor, or in Shopify...) work with drag&drop, especially how do they save the state (so that when we re-open the page, all the components we built are saved).
Do they persist the whole resulting html? Or do they persist a model and re-create the html dynamically out of that model?
I'm very curious and would be happy to learn from your experience :)
I have no idea as I never used them. But I assume it is either local storage or API. In a big project it is for sure API as local storage it really limited. Which means which every drag/change/add on client side they send a request to API with information how all elements are located and their positions. Then on page reload this information is loaded from API and elements are positioned accordingly.
@@MonsterlessonsAcademy Ok many thanks! I'm thinking since many weeks how something like this could be implemented (just by curiosity) :)
THANKS. VERY WELL
You are welcome
Can this functionality also be applied to a grid? I'm currently working on a dashboard project where I need to implement drag-and-drop and resizing for the metrics displayed in the dashboard. I'm using the Grid component from Material UI.
I didn't try it with the grid but I don't see why it would not work. You can drag and drop anything with it.
@@MonsterlessonsAcademy I did try using `react-grid-layout` but it works well with class based components and react official documentation doesn't recommend using class components.
Will give it a try and I would love to see a video on using it with the Grid.
Thank you.
1- I wanted to know if drag and drop is possible in reactjs. ?
2- My click event handlers stopped working after wrapping with Dndcontext
A godsend 💙
+1 Sub
why having hook in dnd is so important?
Because nowadays all libs are written with hooks and they are a reusable way to implement things. It's not mandatory but other libs had bad API or were deprecated. For example there is zero sense to use render props approach in React nowadays.
What color theme are you using in this video?
It's gruvbox
why my project got flicker after update the users state (the component is re-rendered), and you are not facing the same thing like me?
No idea. You need to debug that.
@MonsterlessonsAcademy How can we store the new position information in a postgres database? If my initial list was obtained from the same database
@iamanupambiswas To achieve that, you can create a column named “sort_index” in the database. In your React app, you can create a hidden input with the same name and set its “value” attribute to “index”. When the onDragEnd function is triggered, you can make a call to the database to update all the elements on the list. To avoid calling the database too frequently, it’s recommended to use a debouncing function. Any questions, let me know.
hey thanks for this, i am in a similar issue. I am trying a linktree clone with supabase tables "users" and "links" as a learning experiment. I am using NextJS with Supabase. Right now im at a stage on how do i persist data to display links for a specific user as each user will have its own sorting arrangement. How do you think i should go about it?
All links are in "links" table and i get them from the user that requests it accordingly.
any help is appreciated.
i have watched this tut for approx 7 times, and I have no idea why I cant get drag and drop in my project
Did you check the source code under the video and compare it to yours?
hey thanks for this, i am in a similar issue. I am trying a linktree clone with supabase tables "users" and "links" as a learning experiment. I am using NextJS with Supabase. Right now im at a stage on how do i persist data to display links for a specific user as each user will have its own sorting arrangement. How do you think i should go about it?
All links are in "links" table and i get them from the user that requests it accordingly.
any help is appreciated.
No idea, as you have a super specific problem which is not related to this video.