const dragEnd = e => { if (e.target.style.display === 'none') { e.target.style.display = 'block'; } } The above code will fix the cards getting lost upon unsuccessful drag 'n drops.
FYI for the reason cards disappear when dropped outside of boards or on top of one another is due to the setTimeout(). Not sure why but with it removed you can no longer drop outside of the board or on top of another card and have it disappear.
Really easy to understand and replicate. You've helped me solve my final project in my development bootcamp!! You're my hero for the year!! Thank you!!
Just one query to the content owner!! Normally, it has been suggested over time and again that direct DOM manipulation shall and must be avoided working with react.js. You used the same old HTML way interacting with DOM. Is it because we can't achieve drag&Drop all thoroughly with react.js??
Thank you, first, for a very good explanation of vanilla drag and drop within a React app. I was a little disappointed right at the end when you left it with a pretty huge bug, though. On the other hand, that's kind of leaving it as an exercise for the class. So, again, thank you.
I really like that setTimeout, once in a interview they asked me why setTimeout (fn,0) is usefull but I fail to give the answer,If you don't mind can u tell me what are some other good uses of setTimeout 0 and maybe a good understandble definition :)
If you want to copy an item them all you would need to do is add a duplicate button to the card so when you click it , it copy's the inside data and creates a new card
@@TylerPotts Hi Tyler. First I want to say I love this video, it is very helpful. Can you please explain how to do this copy item more? I used the cloneNode and it works for dragging a copy over the first time, but after that, if you try to drag the copy, the copied card is null and it fails. If you could help, I would really appreciate it. Thanks.
Any advice for moving components? Long Story Short, when I drag a component (that uses object KVP for styles and attributes) It auto updates state and crashes saying that it cannot read type of type={field.type}. Any advice for this?
How can we make conditional drag and drop? How to avoid draggable components to drop into droppable area based on existing components in droppable area.
@@TylerPotts Hey i created calendar watching your video. Can you also implement touch events in the previous javascript drag & drop? codepen.io/bikram-chettri/pen/VoMJoe
You are genius. When we drag a drop a card identically over another one the second card disappear (deleted from the board). How can we resolve this problem please? Thank you in advance.
if there is no console error, it would work perfectly, may be check this line in board.js. const cardId = e.dataTransfer.getData('cardId'); const card = document.getElementById(cardId); card.style.display = 'block'; e.target.appendChild(card); make sure the camelCases areentered correctly
this, is the start of my journey with react, here we goo
Good luck! :D
const dragEnd = e => {
if (e.target.style.display === 'none') {
e.target.style.display = 'block';
}
}
The above code will fix the cards getting lost upon unsuccessful drag 'n drops.
Thank you so much for share
FYI for the reason cards disappear when dropped outside of boards or on top of one another is due to the setTimeout(). Not sure why but with it removed you can no longer drop outside of the board or on top of another card and have it disappear.
This is why you should always read the comments! Thanks!!
Just put display block logic inside drug over handler. It disappears because display is still set to none
I can't believe it , it was straight forward and easier than trying to implement a library , lol. Thanks a lot!
Nice one. Thank you for this
Thank you ... great tutorial... as a growing developer im happy to see a community willing to share and help others ... again thank you
Glad it was helpful!
Thank you so much for the tutorial.
You teachs me a LOT.
Have a nice day and stay healthy Trey.
That's what I like to hear! I'm happy it helped!
Really easy to understand and replicate. You've helped me solve my final project in my development bootcamp!! You're my hero for the year!! Thank you!!
So if that card has data in it, how do you pass that data between those two boards? Especially if they are separate components?
Tyler, Really nice tutorial. You made it easy to understand
Glad it was helpful!
if you want to swap two cards? then what should i change?
Excellent explanation, I like the part with the timeout in your card.js file. You explained and illustrated very well.
Thank you I hope you enjoyed the video! 🔥🌵
@@TylerPotts Yes, I like to watch the work of other developers. Stay tuned ;-)
Just one query to the content owner!! Normally, it has been suggested over time and again that direct DOM manipulation shall and must be avoided working with react.js. You used the same old HTML way interacting with DOM. Is it because we can't achieve drag&Drop all thoroughly with react.js??
Wondering the same thing...
Cool... Just what was I looking for. Thanks man 👍🏻. Awesome tutorial.
Please, could you share to us that beautiful VSCode theme and setup? That dark green look and feel makes me want to code insanely.
Really nice tutorial. Needed something like this for my next project
Great to hear!
The intro to this tutorial was unexpectedly hilarious
Would you be able to now take the state and save it so that the state saved could be re rendered elsewhere within the webapp? Great tutorial
thankyou sooo much vroooo
Thank you, first, for a very good explanation of vanilla drag and drop within a React app. I was a little disappointed right at the end when you left it with a pretty huge bug, though. On the other hand, that's kind of leaving it as an exercise for the class. So, again, thank you.
Thank you so much for making a great easy to understand tutorial!!
Glad it was helpful!
This is an awesome tutorial, thank you! Worried this was going to take a long time but you did a great job explaining!
react is about working with the state not with the DOM elements. how do you save changes in the state?
Great video Tyler. Keep em coming.
Thanks Ryan.
I really like that setTimeout, once in a interview they asked me why setTimeout (fn,0) is usefull but I fail to give the answer,If you don't mind can u tell me what are some other good uses of setTimeout 0 and maybe a good understandble definition :)
stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful o7
Great tutorial!
easy to understand, great bro
Loved it, cheers!
Glad you enjoyed it!
What kind of extension VSCode you use to get such us interface?
And if we want to copy the item instead of moving it? what should we do?
If you want to copy an item them all you would need to do is add a duplicate button to the card so when you click it , it copy's the inside data and creates a new card
@@TylerPotts Hi Tyler. First I want to say I love this video, it is very helpful. Can you please explain how to do this copy item more? I used the cloneNode and it works for dragging a copy over the first time, but after that, if you try to drag the copy, the copied card is null and it fails. If you could help, I would really appreciate it. Thanks.
How can we keep a copy behind in one of the containers
Amazingly done! Simple, clean and efficient. Thanks for taking the time, helped me a lot.
I'm happy it helped! :D
Amazing mate! Thanks a lot!
You're welcome! More to come!
Great video but the card still disappears when i drag and drop it :( not cool
Lol, we have the same wallpaper! Great tutorial
Thanks 😂
What abour framer motion?
Any advice for moving components? Long Story Short, when I drag a component (that uses object KVP for styles and attributes) It auto updates state and crashes saying that it cannot read type of type={field.type}. Any advice for this?
Good day, Thanks you a lot for video, it's awesome. But I have one problem, it doesn't work in mobile or tablet version. Why?
As we use a click event listener dragging isn't a native function for it so it only works on desktop
@@TylerPotts Is there any way to make dnd work on mobile?
how do we get the card_id? or how do we access each item to set different alerts on each one?
thank you so much!!!
You're welcome!
Awesome! Thank you very much :D
great its helps me in the table grid
Happy to help!
very usefull video thank you dude
Thanks for watching! 😁
Very impressive. One question. How to limit dragging at a specific area like jQuery containment?
good one, i tried this, everything works good, except the card overlay, how to change the display style to block after overlaying?
so helpful. thanks a lot
thank you
I'm getting an error: e.stopPropogation is not a function
Hey where can I get the source code
Awesome, tks from Brazil
Amazing my friend! It's is very helpful!
Glad to hear that!
Hey where I can get the source code
it really helped mr
amazing
Thank you so much you made a great tutorial!
Thank you for making this tutorial.
Anytime!
How can we make conditional drag and drop? How to avoid draggable components to drop into droppable area based on existing components in droppable area.
awesome.
what a intro ooooooooooooooooooooooooooooooooooooooooooooooooooo
@Tyler Potts This really amazing . One help, unable to name the boards .
Great, Very Helpfull
Happy to help!
Oh man I'm hook on your videos.
That's awesome! I am happy you're enjoying them.
@@TylerPotts Hey i created calendar watching your video. Can you also implement touch events in the previous javascript drag
& drop? codepen.io/bikram-chettri/pen/VoMJoe
You can but I believe you will need a library for native touch events... I believe the drag n drop api supports mobile devices.
How can I put the elements in the order I drag?
You would have to set a weight on the cards and display them by weight.
how to drag and drop within on board?
Sorry I am not sure what you mean?
@@TylerPotts i assume he means to drag and move around on one board
@@TylerPotts Is there a solution to this? I am still looking to get drag and drop working, but on one board. It will disappear as it is.
Thanks for sharing
Just give me the wallpaper ! It super cool
How we can save the board??? so if we re load it still remains there
You could use firebase to save the current position and board of each card!
@@TylerPotts but how??
can u pls give me any idea on how to make copy/clone drag and drop ?
You need to get the data information instead of transfering the element, hope that helps it is a little hard to explain over comments.
You are genius. When we drag a drop a card identically over another one the second card disappear (deleted from the board). How can we resolve this problem please? Thank you in advance.
comment the setTimeOut part
@@papawei i was looking for that fix, thanks !
I want the source code... please send me the git link
Muito bom cara, parabéns!!!!
Cant drop the boxes anywhere, i can drag them but when i release them they disappear
if there is no console error, it would work perfectly, may be check this line in board.js.
const cardId = e.dataTransfer.getData('cardId');
const card = document.getElementById(cardId);
card.style.display = 'block';
e.target.appendChild(card);
make sure the camelCases areentered correctly
Hi nice tutorial, how do i make this sortable?
thanks asshole
i am getting problem in drag and drop
cool but no github link?
perfect ^^
share your git link
hi tyler ,how i can drag multiple items to a dropable area. please guide i am using it in my project...
This code does not work :(
Ok but why did u jump
02:55
using getElementById in React is anti-patern!
hagu
document.getElementById seems to me not the reactjs' philosophy