React Drag And Drop Tutorial - React-DND Made Simple
ฝัง
- เผยแพร่เมื่อ 1 ต.ค. 2024
- Hey everyone, in this video I will go over the react-dnd library and create a simple application where you are able to use a drag and drop functionality.
Code: github.com/mac...
-
❤️ Want to Support the Channel?:
/ @pedrotechnologies
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
Tags:
ReactJS Tutorial
ReactJS and MySQL
NodeJS Tutorial
API Tutorial
#react-dnd #draganddrop
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.
Wanted to learn React DnD, saw his name, watched the video, totally worth it. This man is a fucking legend
The intro is too short. Can you make it like 80% of the actual video?
Sure i will do this next time :)
Finally a tutorial that doesn't explain stuff for 20 mins just to add 5 min drag and drop at the end
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
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
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?
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 :)
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 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
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
After the "npm i", the "npm start" did not run. So this is not working anymore...
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??
Thanks pedro
while droppping images are not getting dropped what could be the issue?
Thank you for simplifying the library, hope you have wonderful day/evening
Had a bit of trouble getting started from the docs. This is was incredibly helpful. Thanks!
Great efforts man. You nailed it!
Your videos make me love ReactJs more. Keep up the good work, Pedro.
Thank you! Will do!
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!!!
what if I have 2 boards ? How can i do it which board has been chosen?
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!)
Thank you for a great tutorial! there wasnt enough documentation for dnd and this video really helped me alot!
yo PT, thanks for the clear and concise explanation on the basics of react dnd
Thank you :)
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....
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.
Can you do more videos on this also for beautiful dnd
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
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?
Pedro, your video was very useful, thanks for the tutorial, and good luck =)
Glad you liked it!
tnx. don't like that, too complicated
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?
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?
It's quiet useful tutorial for beginners. Thank you for the video buddy!
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.
is there any video of your on beautifil-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 :(
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.
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
You are a legend, thank you so much
Your explanation was simply awesome man, keep up the good work :)
Can I use this way now , or it have a new way
thanks for the video, finally I could implement a working drag and drop
U get {isDragging} but didn’t use
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 ?
your tutorials are so helpful, thank you for making them!
Thanks brother, youre the best!!
Hii
Can we get the coordinates of x and y axis as well for the image drop in any position of that div???
Thank you so much brother. Really helped me . I was given a tough task in my company . This really helped me.
thanks for your effort in this tutorial, it's very helpful to understand dnd!
Please show how to remove the item from list after dropping
Thank you for it, without you the topic was scary and I could not do it for a week 🙏
Pedro, your video was very useful. have a nice day :)
Best tutorial on Dnd that I've found on TH-cam.
very useful video, the concept is pretty clearing
excelente video!!! parabens e valeu pelo conteudo massa, tem me ajudado muito no desenvolvimetno do meu tcc
Great bro!!! Thanks a lot!!
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.
Very good tutorial, efficient, engaging, and well explained
Thanks a lot, you have survived me with this awesome video!
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
Thank you so much man
Your explaination is better than Dnd docs. You save my day. Thank you =)
Thank you bro!
Thanks! It was simple enough
bom video 👍
thanks bro
thank you! this helped a lot.
sa e ke?
that was a really really good tutorial
Good intro already, thanks
whoa this is an absolute banger
This video helped me a lot!
iam happy to see you
thanks I learned a lot
Very nice one, thanks
difficult for me, but well explained, thank you
It is a complicated library, glad you liked it :)
thanks a lot bro))
It is amazing one
Thank you sir
Nice explanation.
Love you dude
very good
Really nice tutorial.. with React-DND you can drag drop text and put in a cursor position inside a editable div/element?
ERROR in ./node_modules/react-dnd/dist/core/DndProvider.js
i get this error and i am using react 17.0.2