Thank you very much for making this tutorial and not making it a living nightmare to follow. The authors of React Dnd should really take note on how to make a simple tutorial like this. Clean and precise! Not telling us on his thought process while making a tutorial. Example : "Why A8 instead of A1? To match the browser coordinate orientation. I tried it another way and it just messed with my head too much." This is from docs, something we don't really need to know. Moreover, in the docs , it goes into three different wrong ways before doing it the correct way. All we need is the correct working examples. Moreover, it was so hard to follow and not sure where was it taking us.
Hi pedro, it’s was a long time I haven’t watched your video. I've been busy working on several projects for the past few months. thanks for the videos so far. From your video I started to learn React. although furthermore I'm looking for other references, but your content is what makes me interested in React which my current project is mostly React.
@@PedroTechnologies Hello, How can we drag back the items from container to their initial position. for example we mistakenly drag some items then how can we drag back the same? please help
@@PedroTechnologies i was searching same work for the last three days and you came like a miracle, you helped me a lot, I need one more help, can we move div instead of pictures.please suggest me
I love no-nonsense tutorials! I couldn't agree more with Alex Fancy.... just the fact please! (it's why I subscribed to your channel... keep up the no bullshit tutorials!)
Thanks alot for this wonderful video of DnD .. As u mentioned in the video, I couldn't understand it properly at first. But the way u explained was so great and it will be more helpful when u watch it two or three times. Keep going brother....
Thanks, awesome content ;) But what if I need to drop my elements to a relative container, that keeps element's position wherever I dropped them? Can you give me an advise please?
Professional and good tutorial ! I would appreciate it if you could upload a guide that explains how the user can change the order of the images after they have been uploaded to the drag area.
This would be nice to do a App project management like Trello, and save to elements positions to a database, do you think you could a video tutorial example like that ?
Hey Pedro I think they probably changed stuff in their library because now when dragging the image, it shows a cursor of "forbidden" and if you drop it outside of the left container it won't do an animation of the image going back to its original place...This is at least for me in Chrome
Hi Pedro. That was GREAT!! Could you male a tutorial with this same DND for the following case including a clickon so that when I click on the image once on the dropped area, it returns to its original place? For example: I have three boxes: Box 1: My, Box 2: Name and box 3 : is Carlos. But they are in an unordered manner and I want my student to drag and drop them on the dropping area correctly. In addition, I want to move them around in the dropping area and also to make any of them return to the original area when I click on them. THX!!!
hi this was the best explanation for the dnd module. is there a way to persist that newly sorted array in mongodb? I have a todolist and i want it to be dnd...but as soon as i restart my page...my order is reset to default.
hey pedro thanks for the video it was amazing , i wan't to ask you how can i keep the place of the dropped image in the right place i wan't it to be on the board ?
How do I get data from the drop container? I have a bunch and I need to know exactly which one I'm dropping at. I can only get the 'id' of the element being dragged but not on the drop target.
Hi Pedro I love ur content my dude, you pulled me again into coding. I have one question: How can I make separated Css files for each page? Right now I have homepage with "register" page styles too. is there any solution? Thanks!!
That makes me happy! You can create separate css files and just import them inside of the page component you want. Ex: inside of the home page component you can do somehing like import './Home.css'
Using SCSS is amazing , you could just give the main div being rendered a className and the only style items inside that div. The styles shouldn't be used in any other file like that. If it helps.
I put the DndProvider component in app.tsx and then when I started the app I got this error: ERROR in ./node_modules/react-dnd/dist/core/DndProvider.js 28:0-48 Module not found: Error: Can't resolve 'react/jsx-runtime' in '...........app ode_modules eact-dnd\dist\core' Did you mean 'jsx-runtime.js'? BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. Has anyone else got the same problem? And how did you managed to fix the problem? I'm working on react version 17
Hey Pedro, do you know why dropping is not working on Firefox (but works perfectly on Chrome/Safari) ? The image appears in the middle of the screen and the server does not work anymore :(
Hi i have a question about using drag and drop for my chess game just wondering if you could send me down the right track of what to do , the chess pieces move back to there original spot once moved and are then updated to the new spot, i want to drop them in the square and leave them their , easier explained in the video th-cam.com/video/7lpWt3hM0AQ/w-d-xo.html
![BOWKYLION - วิงวอน (ex-change) [Official MV]](http://i.ytimg.com/vi/cLdnZWDaO-w/mqdefault.jpg)
Wanted to learn React DnD, saw his name, watched the video, totally worth it. This man is a fucking legend
Thank you very much for making this tutorial and not making it a living nightmare to follow. The authors of React Dnd should really take note on how to make a simple tutorial like this. Clean and precise! Not telling us on his thought process while making a tutorial.
Example : "Why A8 instead of A1? To match the browser coordinate orientation. I tried it another way and it just messed with my head too much." This is from docs, something we don't really need to know. Moreover, in the docs , it goes into three different wrong ways before doing it the correct way. All we need is the correct working examples. Moreover, it was so hard to follow and not sure where was it taking us.
Finally a tutorial that doesn't explain stuff for 20 mins just to add 5 min drag and drop at the end
Had a bit of trouble getting started from the docs. This is was incredibly helpful. Thanks!
Your videos make me love ReactJs more. Keep up the good work, Pedro.
Thank you! Will do!
Best tutorial on Dnd that I've found on TH-cam.
Hi pedro, it’s was a long time I haven’t watched your video. I've been busy working on several projects for the past few months. thanks for the videos so far. From your video I started to learn React. although furthermore I'm looking for other references, but your content is what makes me interested in React which my current project is mostly React.
That is awesome! Always diversify your resources :) I am happy to hear I helped you learn!
@@PedroTechnologies Hello, How can we drag back the items from container to their initial position. for example we mistakenly drag some items then how can we drag back the same? please help
Thank you for simplifying the library, hope you have wonderful day/evening
it's like you were reading my mind. I was about to search for this and you did a video on it, thanks, keep up the good work.
haha yes me too
Hahaha I don't know why I decided to make this video! The idea just came to my mind!
@@PedroTechnologies i was searching same work for the last three days
and you came like a miracle, you helped me a lot, I need one more help, can we move div instead of pictures.please suggest me
Thank you for a great tutorial! there wasnt enough documentation for dnd and this video really helped me alot!
Thank you for it, without you the topic was scary and I could not do it for a week 🙏
yo PT, thanks for the clear and concise explanation on the basics of react dnd
Thank you :)
Thank you so much brother. Really helped me . I was given a tough task in my company . This really helped me.
I love no-nonsense tutorials! I couldn't agree more with Alex Fancy.... just the fact please! (it's why I subscribed to your channel... keep up the no bullshit tutorials!)
Thanks for the great tutorial! It helped me greatly with the implementation of dnd in my React learning project!
Thanks alot for this wonderful video of DnD .. As u mentioned in the video, I couldn't understand it properly at first. But the way u explained was so great and it will be more helpful when u watch it two or three times. Keep going brother....
Thanks, awesome content ;) But what if I need to drop my elements to a relative container, that keeps element's position wherever I dropped them? Can you give me an advise please?
Professional and good tutorial !
I would appreciate it if you could upload a guide that explains how the user can change the order of the images after they have been uploaded to the drag area.
Great efforts man. You nailed it!
This would be nice to do a App project management like Trello, and save to elements positions to a database, do you think you could a video tutorial example like that ?
Your explaination is better than Dnd docs. You save my day. Thank you =)
It's quiet useful tutorial for beginners. Thank you for the video buddy!
Your explanation was simply awesome man, keep up the good work :)
thanks for the video, finally I could implement a working drag and drop
your tutorials are so helpful, thank you for making them!
thanks for your effort in this tutorial, it's very helpful to understand dnd!
Hey Pedro I think they probably changed stuff in their library because now when dragging the image, it shows a cursor of "forbidden" and if you drop it outside of the left container it won't do an animation of the image going back to its original place...This is at least for me in Chrome
Hi Pedro. That was GREAT!! Could you male a tutorial with this same DND for the following case including a clickon so that when I click on the image once on the dropped area, it returns to its original place? For example: I have three boxes: Box 1: My, Box 2: Name and box 3 : is Carlos. But they are in an unordered manner and I want my student to drag and drop them on the dropping area correctly. In addition, I want to move them around in the dropping area and also to make any of them return to the original area when I click on them. THX!!!
hi this was the best explanation for the dnd module. is there a way to persist that newly sorted array in mongodb? I have a todolist and i want it to be dnd...but as soon as i restart my page...my order is reset to default.
Very good tutorial, efficient, engaging, and well explained
Thanks a lot, you have survived me with this awesome video!
hey pedro thanks for the video it was amazing , i wan't to ask you how can i keep the place of the dropped image in the right place i wan't it to be on the board ?
very useful video, the concept is pretty clearing
Pedro, your video was very useful, thanks for the tutorial, and good luck =)
Glad you liked it!
this video was really useful! ❤ but could you help me? i wanted to drop the same image multiple times onto the board,, what should I do?
Thanks Pedro, would be really nice if u explain Redux.
Looks so complicated:(
Thanks for vids👍
Hahaha I usually don't use Redux. However I had to learn it for my job so maybe I can make a video on it
Thanks! It was simple enough
You are a legend, thank you so much
Thanks brother, youre the best!!
Pedro, your video was very useful. have a nice day :)
I would like to be able to only drag an item once, we can actually drag an item that is in the board or not multiple time… how could I do it??
This video helped me a lot!
Good intro already, thanks
How do I get data from the drop container? I have a bunch and I need to know exactly which one I'm dropping at. I can only get the 'id' of the element being dragged but not on the drop target.
Thanks pedro
thank you! this helped a lot.
Hii
Can we get the coordinates of x and y axis as well for the image drop in any position of that div???
that was a really really good tutorial
I am trying to drop items on to a mapped grid but I don't know how to let it know which square I am dropping to. Any ideas?
difficult for me, but well explained, thank you
It is a complicated library, glad you liked it :)
hy there, thanks for this , i need same code for a drag and drop of div in another div, what will be the changes?
please suggest me
Hi Pedro I love ur content my dude, you pulled me again into coding. I have one question: How can I make separated Css files for each page? Right now I have homepage with "register" page styles too. is there any solution? Thanks!!
That makes me happy! You can create separate css files and just import them inside of the page component you want. Ex: inside of the home page component you can do somehing like import './Home.css'
Using SCSS is amazing , you could just give the main div being rendered a className and the only style items inside that div. The styles shouldn't be used in any other file like that. If it helps.
Great bro!!! Thanks a lot!!
whoa this is an absolute banger
thanks I learned a lot
excelente video!!! parabens e valeu pelo conteudo massa, tem me ajudado muito no desenvolvimetno do meu tcc
while droppping images are not getting dropped what could be the issue?
Very nice one, thanks
Please show how to remove the item from list after dropping
I put the DndProvider component in app.tsx and then when I started the app I got this error:
ERROR in ./node_modules/react-dnd/dist/core/DndProvider.js 28:0-48
Module not found: Error: Can't resolve 'react/jsx-runtime' in '...........app
ode_modules
eact-dnd\dist\core'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
Has anyone else got the same problem? And how did you managed to fix the problem? I'm working on react version 17
what if I have 2 boards ? How can i do it which board has been chosen?
Can you do more videos on this also for beautiful dnd
Hey Pedro, do you know why dropping is not working on Firefox (but works perfectly on Chrome/Safari) ? The image appears in the middle of the screen and the server does not work anymore :(
Thank you so much man
After the "npm i", the "npm start" did not run. So this is not working anymore...
Nice explanation.
Thank you bro!
Is there anything in DND to create my own emoji rating people can drag and drop on the form easily? Can I do that easily?
is there any video of your on beautifil-dnd
iam happy to see you
Can I use this way now , or it have a new way
Love you dude
Thank you sir
It is amazing one
very good
thanks a lot bro))
thanks bro
Make small project on nodejs mongoose reactjs product details uploaded
It has been a while since I made a video using mongo, might do one :)
bom video 👍
U get {isDragging} but didn’t use
Hi i have a question about using drag and drop for my chess game just wondering if you could send me down the right track of what to do , the chess pieces move back to there original spot once moved and are then updated to the new spot, i want to drop them in the square and leave them their , easier explained in the video th-cam.com/video/7lpWt3hM0AQ/w-d-xo.html
sa e ke?
The intro is too short. Can you make it like 80% of the actual video?
Sure i will do this next time :)
tnx. don't like that, too complicated
ERROR in ./node_modules/react-dnd/dist/core/DndProvider.js
i get this error and i am using react 17.0.2