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.
@@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!)
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
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....
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 ?
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.
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?
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.
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.
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 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 ?
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 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.
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 ruclips.net/video/7lpWt3hM0AQ/видео.html
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
Best tutorial on Dnd that I've found on RUclips.
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
Your videos make me love ReactJs more. Keep up the good work, Pedro.
Thank you! Will do!
Had a bit of trouble getting started from the docs. This is was incredibly helpful. Thanks!
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!)
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
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....
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 for a great tutorial! there wasnt enough documentation for dnd and this video really helped me alot!
Thank you so much brother. Really helped me . I was given a tough task in my company . This really helped me.
Great efforts man. You nailed it!
Your explaination is better than Dnd docs. You save my day. Thank you =)
Thanks for the great tutorial! It helped me greatly with the implementation of dnd in my React learning project!
It's quiet useful tutorial for beginners. Thank you for the video buddy!
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 ?
thanks for the video, finally I could implement a working drag and drop
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.
Your explanation was simply awesome man, keep up the good work :)
thanks for your effort in this tutorial, it's very helpful to understand dnd!
your tutorials are so helpful, thank you for making them!
Pedro, your video was very useful, thanks for the tutorial, and good luck =)
Glad you liked it!
You are a legend, thank you so much
Very good tutorial, efficient, engaging, and well explained
very useful video, the concept is pretty clearing
Thanks a lot, you have survived me with this awesome video!
Thanks brother, youre the best!!
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?
Thanks pedro
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
Pedro, your video was very useful. have a nice day :)
Thanks! It was simple enough
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!
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
Great bro!!! Thanks a lot!!
thank you! this helped a lot.
Good intro already, thanks
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.
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.
whoa this is an absolute banger
while droppping images are not getting dropped what could be the issue?
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
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?
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?
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 ?
After the "npm i", the "npm start" did not run. So this is not working anymore...
that was a really really good tutorial
what if I have 2 boards ? How can i do it which board has been chosen?
thanks I learned a lot
Thank you so much man
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 :(
difficult for me, but well explained, thank you
It is a complicated library, glad you liked it :)
Thank you bro!
Hii
Can we get the coordinates of x and y axis as well for the image drop in any position of that div???
excelente video!!! parabens e valeu pelo conteudo massa, tem me ajudado muito no desenvolvimetno do meu tcc
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
Can I use this way now , or it have a new way
Can you do more videos on this also for beautiful dnd
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?
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.
Very nice one, thanks
Nice explanation.
iam happy to see you
is there any video of your on beautifil-dnd
Please show how to remove the item from list after dropping
Love you dude
Thank you sir
thanks bro
thanks a lot bro))
It is amazing one
very good
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 :)
U get {isDragging} but didn’t use
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 :)
bom video 👍
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 ruclips.net/video/7lpWt3hM0AQ/видео.html
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