Much useful for someone who is trying to achieve drag and drop without any external library. Also, I learned how you think while coding. Awesome... Thank you so much.
@@asat2585 i am trying to make two separate components droppable and draggable for past few days but miserably failing. Learned few things from this video... but still not working.
@@VinaySingh-ep2tv Yeah, when passing a key, you want to make sure that key is unique within the list you're iterating. WORST case, you could use an index as a key. Also, what error are ya getting?
@@asat2585 This is the error i am getting even after providing unique keys : react-dom.development.js:14748 Uncaught Error: Objects are not valid as a React child (found: object with keys {key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
If somebody having issue of dragging item bouncing back to initial location, creating onDragOver event handler and calling e.preventDefault() in it helps
Hey Bro..This tutorial was very useful...Thanks a lot..If possible could you make an update on this tutorial with support to touch events on mobile..It would be really useful...
For anyone who's watching this with the dislikes now hidden - this guy only has 7 dislikes out of the 700 likes. Also I'm only 20 minutes in but you deserve way more than 400 subs. Cheers!
Here ya go! I threw a library up on npm for react package that implaments drag and drop using xstate (state machine lib): www.npmjs.com/package/drag-xstate
Awesome tutorial! How would one go about "consuming" elements. For example initiate a source and a destination group. looking to replace the switching places action with a delete. Any advice is appreciated thank you!
@asat Is anyone else having the issue where when you let go of the item you are dragging it appears to go back to it's original position before appearing in it's new location? I don't see the issue in this video but I checked out the github repo and saw the same issue there so I don't think it's just my code.
@@ellenwyllie2297 if i may also add, same thing happens when you drag the first item (index 0) of a group over an empty group - both currentItem and "target" item are having index 0. so same with the solution you provided - this time around, add it to the "dnd-group" div. cheers. 👌🏼
The code doesn't quite match the video, making it difficult to troubleshoot, but man, I really liked following the video. Unfortunately I got a bit off track toward the end and was hoping I could make sense of it once I just cloned the repository and picked through it. But the repo breaks: (TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string.) I didn't see anyone else mention this (at least in the 15 or so comments I scrolled through) but I am pretty confident that I cloned it correctly - plus I didn't catch in the video when 'params' was renamed but all instances are gone from the repo. I tried copying the code to a fresh react app and the drag and drop doesn't work. Anyone with any cleanup or clarification? Thanks for making the video all the same, just wish I could use it.
In case you are still interested in this code, the problem just has to do with the age of the repo. The reference to the "path" error is due to some behind the scene changes. To fix this, you can just update your react-scripts in package.json from 3.3.0 to 3.4.1. That will update the package enough to get it running. That's why no one else had the problem. They are older comments. As for the renaming of params to item, it has no effect other than making the code more self-documenting.
Depends. For something very simple, sure. But if you need mobile support, probably look at libraries..they're way more mature that handle all kinds of edge cases
Hi, I just implemented this code and it's working fine. But when I replace those numbers with tag and src is base64 url, the image is not getting dragged. However, the container in which image is wrapped can be dragged. Can you please help with it.
My drop functionality won't work. It will move items that I drag my item over but just keeps going back to its original place. Maybe I'm just a noob but I've spent hours trying to figure out why it doesn't work.
I did something similar, but I had to use onDragOver instead of onDragEnter, behavior was more predictable. Also, wondering why your onDragEnd was misbehaving - I haven't noticed any unpredictable behavior on my end.
Yeah, only reason I used dragenter was because it fires once when you drag something into it instead of several times when you dragover. Dragend was wonky. If I added the event listener "react" way, sometimes it would fire randomly when dragging between columns/lists. Saw a post somewhere about that and their solution was adding it through DOM API.
@@asat2585 I was actually using drag over because the children of a div I was dragging over caused onDragLeave to fire. When you are doing dragEnter, you will also fire onDragLeave of hovered component before onDragEnd of the dragging component. If you are using onDragEnd to trigger events, this could be a problem. With onDragOver, the onDragLeave only fires when you actually leave hovered component, not when you drop dragged item.
Yes! I think I've ran into something similar as well. Don't remember if that was on this project. I know that I had a solution with pointer-events in CSS.
Hey! Can you help?, is it possible to swap objects, for example, of different widths and lengths, and so that when dragged to another block, they change among themselves, and change in width and height?
Hi! I have a question: How could I do this for only 1 item per group... Imagine your state is the next [ {data}, {data}, {data} , ... ] I want to have each data object on its own group and so I shoudlnt need to manage groups and group indexes
With adding draggable in div, it is grabbing the space next or above it, like almost a wrong snap shot is grabbed and this behavior is in Chrome. Anyone has similar issue?
Hey Bro, I am trying to do the same thing but there are 2 major differences one is I have a nested list in each group and the other is I am using Class full components. Can you help in figuring the first problem of mine i.e. nested list?
Honestly, not sure. I would assume it would work on other browsers. Regarding touch events, my guess not. When I was making this, I didn't intend for this to be a prod ready solution like react-dnd, but more of a challenge. Thanks!
@@asat2585 Are u saying this can't be used in production? I think I would prefer a without framework solution like this to using a library for production. And from what you have done this might work. The only issue for me in using this is how my data is structured. For instance, the items in the list array is separately gotten by making an API call with id of the group array. This is currently my dilemma.
What I meant was I didn't test this solution on different browsers and devices. If it works and fits what you're trying to do then sure, you can test and push this to prod.
@@asat2585 i have only 1 group of data , i not similar with the splice function , when i drag one of its , the other will randomlly drag also , may i just share the video to you?
Still didn't understand why you did setTimeout(() => setDragging(true), 0) In handleDragStart() function instead of directly writing setDragging(true). Can you please explain it again in a more rooky manner.
There should be no difference as setTimeout and setDragging (which is setState) are both async functions, which will wait until all synchronous code is executed. He basically wrapped one async function into another async function.
If not interested in styling portion, skip to 20:15 for flow/code.
This is the best explanation that i found of dnd in react taking account performance without rerenders often problem and using ref as approach
Much useful for someone who is trying to achieve drag and drop without any external library. Also, I learned how you think while coding. Awesome... Thank you so much.
Awesome tutorial. I would not have been able to complete my project without this video, so I really appreciate you making it.
I was working on a side project like this and got stuck and re-ordering the list when you drag an item. This tutorial was very helpful. Thank you 🙏🏽
Struggling with some concepts and mapping them out. Found your video. Is PERFECT. Thank you so much, well done, keep it up.
Wow, this video was amazing. You describe things so clearly, and in a very digestable manner. The pace was perfect. Thanks!!!
Glad you enjoyed it! cheers
very cool. I didn't even know that there was an event for dragging
IT BEST DRAG-N-DROP REACT TUTORIAL IN TH-cam!!!!!!!!!!
FROM RUSSIA WITH LOVE ❣🤝
This tutorial has been the only one which helped to create a good drag and drop functionality, thanks!
Thanks a lot... not only i learned drag and drop but I learned correct way to do the react programming..
Seriously amazing. Even a noob like me comprehended every bit. Tried lots of other tuts but you nailed it with proper flow and explanations.
I'm super happy you found it useful!
@@asat2585 i am trying to make two separate components droppable and draggable for past few days but miserably failing. Learned few things from this video... but still not working.
you have hard coded key as item. So if item is a component , all keys become same and we get error. i used uuid as key but still getting the error((
@@VinaySingh-ep2tv Yeah, when passing a key, you want to make sure that key is unique within the list you're iterating. WORST case, you could use an index as a key. Also, what error are ya getting?
@@asat2585 This is the error i am getting even after providing unique keys : react-dom.development.js:14748 Uncaught Error: Objects are not valid as a React child (found: object with keys {key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
Thanks for the tutorial ! you saved me so much time.
trying to do this with react libraries is so complicated,
Great tutorial !!!
you need to create your own courses! such a great explanation
thank you for this Andrius! I keep coming back to your video every time I need to implement this type of functionality!
Wow, 2 years and the video is still relevant. Really detailed explanations. Thank you so much.
Could you do a similar one using React DND library?
Extremely helpful video. Super clear and explained at each step. Really glad I found this video and watched it to the end
Wow the light theme looks nice, It is hella easy to read😎
No, you gives a lol-comment
Mantap kawan , jadi punya banyak ide untuk merombak Apps yang sudah ada pake drag n drop ... naizeeee... ( excellent Work and Flow )
Thank you so much for the tutorial man! You saved my project!!
Thank you! Awesome tutorial. Exactly what I was looking for
If somebody having issue of dragging item bouncing back to initial location, creating onDragOver event handler and calling e.preventDefault() in it helps
Awesome, thank you. Now time to add the backend part to it :).
You are amazing!! This works perfectly. Thank you for your work.
Hey Bro..This tutorial was very useful...Thanks a lot..If possible could you make an update on this tutorial with support to touch events on mobile..It would be really useful...
Glad it was useful! Will take a look.
Thank you so much, this tutorial is a great help, I very much appreciated it.
For anyone who's watching this with the dislikes now hidden - this guy only has 7 dislikes out of the 700 likes.
Also I'm only 20 minutes in but you deserve way more than 400 subs. Cheers!
Awesome tutorial. Thank you so much!
Amazing explanation ! Thank you ! In another video, you could implement the same functionality using a state machine :-)
Here ya go! I threw a library up on npm for react package that implaments drag and drop using xstate (state machine lib): www.npmjs.com/package/drag-xstate
it is really well explained, thank you so much
Awesome tutorial!
How would one go about "consuming" elements. For example initiate a source and a destination group. looking to replace the switching places action with a delete.
Any advice is appreciated thank you!
@asat Is anyone else having the issue where when you let go of the item you are dragging it appears to go back to it's original position before appearing in it's new location? I don't see the issue in this video but I checked out the github repo and saw the same issue there so I don't think it's just my code.
Can you try replacing json stringify and parse with spread syntax? This seemed like a source for few issues lately
I still see the same issue with the spread syntax
@@asat2585 Turns out I just had to add e.preventDefault() to onDragOver
just to be specific for anyone else experiencing this issue, the solution is to add: onDragOver={e => e.preventDefault()} inside the "dnd-item" div.
@@ellenwyllie2297 if i may also add, same thing happens when you drag the first item (index 0) of a group over an empty group - both currentItem and "target" item are having index 0. so same with the solution you provided - this time around, add it to the "dnd-group" div. cheers. 👌🏼
Thank you very much!
Thank you so much dude.
The code doesn't quite match the video, making it difficult to troubleshoot, but man, I really liked following the video. Unfortunately I got a bit off track toward the end and was hoping I could make sense of it once I just cloned the repository and picked through it. But the repo breaks: (TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string.) I didn't see anyone else mention this (at least in the 15 or so comments I scrolled through) but I am pretty confident that I cloned it correctly - plus I didn't catch in the video when 'params' was renamed but all instances are gone from the repo. I tried copying the code to a fresh react app and the drag and drop doesn't work. Anyone with any cleanup or clarification? Thanks for making the video all the same, just wish I could use it.
In case you are still interested in this code, the problem just has to do with the age of the repo. The reference to the "path" error is due to some behind the scene changes. To fix this, you can just update your react-scripts in package.json from 3.3.0 to 3.4.1. That will update the package enough to get it running.
That's why no one else had the problem. They are older comments.
As for the renaming of params to item, it has no effect other than making the code more self-documenting.
In your own opinion, would you use this from scratch method over the thrid party packages out there such as react-dnd
Depends. For something very simple, sure. But if you need mobile support, probably look at libraries..they're way more mature that handle all kinds of edge cases
Awesome tutorial! But light theme.. Ahh
Hi, I just implemented this code and it's working fine.
But when I replace those numbers with tag and src is base64 url, the image is not getting dragged. However, the container in which image is wrapped can be dragged.
Can you please help with it.
My drop functionality won't work. It will move items that I drag my item over but just keeps going back to its original place. Maybe I'm just a noob but I've spent hours trying to figure out why it doesn't work.
I did something similar, but I had to use onDragOver instead of onDragEnter, behavior was more predictable. Also, wondering why your onDragEnd was misbehaving - I haven't noticed any unpredictable behavior on my end.
Yeah, only reason I used dragenter was because it fires once when you drag something into it instead of several times when you dragover. Dragend was wonky. If I added the event listener "react" way, sometimes it would fire randomly when dragging between columns/lists. Saw a post somewhere about that and their solution was adding it through DOM API.
@@asat2585 I was actually using drag over because the children of a div I was dragging over caused onDragLeave to fire. When you are doing dragEnter, you will also fire onDragLeave of hovered component before onDragEnd of the dragging component. If you are using onDragEnd to trigger events, this could be a problem. With onDragOver, the onDragLeave only fires when you actually leave hovered component, not when you drop dragged item.
Yes! I think I've ran into something similar as well. Don't remember if that was on this project. I know that I had a solution with pointer-events in CSS.
You are amazing, thank you very much.
amazing tutorial thank you that was very helpful
Hey! Can you help?, is it possible to swap objects, for example, of different widths and lengths, and so that when dragged to another block, they change among themselves, and change in width and height?
How do I prevent the default animation when I leave the drag?
Great Tutorial
Thanks. That was very helpful..
Anyone know how to change cursor to "grab" when item is dragged?
This was great. Exactly what I needed to learn. Thank you! Also not to be negative but that theme is kinda hard to see.
No probs. I like light themes. Will have to switch it to dark for videos.
Hi
Your explain is excellent!
How can a touch screen be supported?
Hi! I have a question:
How could I do this for only 1 item per group... Imagine your state is the next [ {data}, {data}, {data} , ... ] I want to have each data object on its own group and so I shoudlnt need to manage groups and group indexes
THANK A LOT, AWESOME 🥰🥰
that nice but when i insert in my react project that not working i dont know why ? if i share you my project repository can you help me ?
Awesome!!!
Thanks a lot!!!!!
With adding draggable in div, it is grabbing the space next or above it, like almost a wrong snap shot is grabbed and this behavior is in Chrome. Anyone has similar issue?
i don't understand why did you use the constant 'dragging' , it works perfectly even without it
This does not work for me, I can't drop into the target div.
same. I was just losing my mind over it for a couple hours.
very cool. Thx!
Maybe you can do an update on how to make it work on mobile devices also :)
It's so nice
Super helpful! Thanks :)
but this will not work on mobile right? any solutions?
Hey Bro, I am trying to do the same thing but there are 2 major differences one is I have a nested list in each group and the other is I am using Class full components. Can you help in figuring the first problem of mine i.e. nested list?
Can you post data structure? Ill try to look at it if I get some time.
DOPE
am confused the splice method why not use delete
Delete will not adjust indeces of other items. It would leave an empty at the index you delete the item.
@@asat2585 got it thank u
Does it support all browsers and devices(touch devices) like react-dnd? BTW your video is so much helpful. Keep your good works going. Thanks.
Honestly, not sure. I would assume it would work on other browsers. Regarding touch events, my guess not. When I was making this, I didn't intend for this to be a prod ready solution like react-dnd, but more of a challenge. Thanks!
@@asat2585 Are u saying this can't be used in production? I think I would prefer a without framework solution like this to using a library for production. And from what you have done this might work. The only issue for me in using this is how my data is structured. For instance, the items in the list array is separately gotten by making an API call with id of the group array. This is currently my dilemma.
What I meant was I didn't test this solution on different browsers and devices. If it works and fits what you're trying to do then sure, you can test and push this to prod.
ht
01:25 c
16:00
i face some problem , can i get your email and send my problem to u?
Try to share it here, in the comments.
@@asat2585 i have only 1 group of data , i not similar with the splice function , when i drag one of its , the other will randomlly drag also , may i just share the video to you?
@@asat2585 i just post my problem on google slide , thanks for review it :)
Can you post either here or on the docs you've linked the structure of your data? I will try to go through it.
@@asat2585 please advice :) thanks
please dont use light theme
Still didn't understand why you did setTimeout(() => setDragging(true), 0)
In handleDragStart() function instead of directly writing setDragging(true).
Can you please explain it again in a more rooky manner.
There should be no difference as setTimeout and setDragging (which is setState) are both async functions, which will wait until all synchronous code is executed. He basically wrapped one async function into another async function.
у тебя не фига не работает!!!!!!!!!!!!!!!!!!!!!!!!!
Stopped watching when realized that you are using light theme
your code doesn't work! make a clone before watching the video! don't waste time
e.currentTarget returns the element you're dragging. No need for useRef
Thank you so much!