Here is another video which answers most of your questions such as sorting in mobile devices, persist the sorting in localStorage. kzfaq.info/get/bejne/bNxoe69hxryvdKc.html
@Krishnasaini Жыл бұрын
feeling great after achieving drag and drop using this video, great explanation. key point - 1. you can even use onDrop event instead of onDragEnd , both works exactly same . 2. Calling the preventDefault() method during dragover event will indicate that a drop is allowed at that location as bydefault drop is not allowed on web pages. 3. if you use onDrop event, you do not need to set preventDefault during dragOver as onDrop event will take of it implicitly.
@trobosko10 ай бұрын
Thank you. So many of these videos include out of date third party libraries, and they're just so confusing and unnecessary. Even though this video is in ts and not js, I did exactly what I wanted to do in my js project in
@ErikNguyen-jk3wb Жыл бұрын
This was the last thing I needed to my final project for my first SWE career, thank you for the tutorial! Very easy to follow and clear :)
@akhtarhssn9 ай бұрын
Wow, your video is incredibly vivid and descriptive! You're absolutely killing it, bro! Keep up the awesome work!
@willjw3717 Жыл бұрын
Solid teaching skills, sir. I thought I would need a library for drag-and-drop, but you've shown me otherwise. Thanks.
@thebikashweb Жыл бұрын
Well for doing a bit more complex stuffs or handle cases like in mobiles you would need to do a lot if you do not use library. But for simple use case yes this should be good.
@haffedali6148 Жыл бұрын
This was clever and simple!! Really nice information that I'm sure would have helped me on an interview a month ago. I feel some developers (like me) can get so accustomed to using libraries that we forget base level implementation! Succinct explanations and clear comments, great video lesson :D
@starlordjs Жыл бұрын
Thank you so much bro, I love how simple it is.
@ANKITSHARMA-ck6ln9 ай бұрын
Thank you so much, you explained the concept in simple ways.
@misaelchavezramos24168 ай бұрын
This video save me from 4 days of stress thks
@karanbhati2373 Жыл бұрын
exactly what i was looking for! thanks
@alizeynalov7395 Жыл бұрын
Thank you very much man. You saved me a big time and no extra dependency :) I'm grateful to you.
@planeenthusiast6819 Жыл бұрын
Bro, you are a legend. Thank you so much.
@marimuthur9456 Жыл бұрын
your really awesome nice one this is what i searched for long time thank you so much your saving my time 😊👌🏼👌🏼👌🏼
@utkumattaktas7994 Жыл бұрын
Thank you!!!! This helped me a lot!
@user-zj2gp7qx1y10 ай бұрын
Thanks. It was very simple solution to understand
@Guilherme-uu8ql Жыл бұрын
THANK YOU VERY MUCH! Great content!
@XdemonX97 Жыл бұрын
Awesome man. Very great work!
@rafaelmacedo71552 жыл бұрын
Hey bro, you save me, thank you so much for the tutorial, Maybe you can make a course, you're so good in what you do, I'm a fullstack developer, but your knowledge is super powerful, thank you so much for all.
@historiaseneltiempo6954 Жыл бұрын
Great, easy and without libraries
@milon27 Жыл бұрын
all good, but the way you are mutating the state is sometimes create unwanted result. you should do setState(previous=> { // now use this previous value and return new value })
@FGA-47 Жыл бұрын
thanks that was really helpful
@ankitsamaniya8203 Жыл бұрын
But there is one problem if you increase the size of div in term of width ,then that time opactiy getting decreased which means blur.i that case what should do ?
@rado147 Жыл бұрын
Thanks a lot man, I was looking for some support for this. U are explaining it very clearly and there is not that much code. I wonder if it will also work for a items displayed in flex-box container, like a grid... kinda like moving around app icons and sorting them, not replacing.
@leemanhcuong Жыл бұрын
thank a lot
@viniciusm.m.78222 жыл бұрын
Thanks, man!!!! God bless!
@user-wc5tc8vr6q6 ай бұрын
thx bro
@DEVONGAMES21153 ай бұрын
works fine
@appstuff656510 ай бұрын
How can we store this new arrangement in a database so it persists?
@adaezeikemefuna9592 Жыл бұрын
This is beautiful and simple. Please, i would like to know how i can make the entire element move on drag and no longer be in it's former position while i', dragging
@priyapandey89515 ай бұрын
Why are we using useRef for storing the indexes? Can't we just use useState?
@yoiler_cordoba2 жыл бұрын
Thank you so much!!
@shankars101 Жыл бұрын
Thank you
@silviualexandruparaschiv98382 жыл бұрын
Thanks mate!
@appstuff656510 ай бұрын
Hey thanks for this! Could you please also do a video or just here in reply let me know how we can do this using server action and useOptimistic Hook? Im using useOptimistic but confused how to do the sorting when i add new item and it instantly shows but the whole scenario seems a bit confusing.. Thanks anyways I have subbed and hope to see more from you.
@pedrovitor14342 жыл бұрын
Incredible tutorial! But i was wondering what could i do to work properly on mobile. The way it's working now in my responsive application is: when i hold the item, i cannot move it and the item automatically goes to the first position of the list(array), just by holding. is someone knows how to fix it, i'd appreciate!
@thebikashweb2 жыл бұрын
Thanks pedro! You are right, we need to re-think drag property for smaller media screen where touch is used instead of mouse. That is the reason why 3rd party libraries are popular. Mobile browser works a bit differently, so maybe instead if drag, we need to listen touch events. You can check this reactjs.org/docs/events.html#touch-events
@mayedakonika66069 ай бұрын
How do mobile phones drag and drop?
@thebikashweb Жыл бұрын
Here is another video based on your request: drag and drop to different container -> kzfaq.info/get/bejne/edGam9SGx83aeKM.html
@vatsalmehta3078 Жыл бұрын
SO in your approach if I drag over some other list element and then try to drop out of screen it'll still swap as in useref the index is of the last dragover element, how can we add a condition where if we try to drag someplace outside and then drop it doesn't drag-drop itself ?
@caiqueandrade13422 жыл бұрын
Tks!!! 🇧🇷
@EugeneVe8 ай бұрын
Need video how to save position for example in local.storage
@thebikashweb8 ай бұрын
Here you go kzfaq.info/get/bejne/bNxoe69hxryvdKc.htmlsi=QXpkY1FLdoyPcyXQ in this video you’ll see how the sorted position can be persisted
@reactstack257 Жыл бұрын
This solution is valid only for web browser , I try to run the app on mobiles iOS/ android it's not working. can you give a tips or ideas what to do ?
@thebikashweb Жыл бұрын
There will be new video soon. Basically we have to then rely on third party packages as doing that manually will be possible but difficult.
@karanselvaraj8503 Жыл бұрын
where did you learn all this sir!!
@dark-stroke Жыл бұрын
How to make it possible to nest one element within another using drag and drop?
@thebikashweb Жыл бұрын
You can follow the same approach but with nested container inside.
@maks-kander6665 Жыл бұрын
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?
@thebikashweb Жыл бұрын
Sorry for the late reply. Yes it is possible to swap objects, you just need to give proper ids to different containers and use them properly. You can have container inside another container or have seperate containers it does not matter. You just need to clearly identify which index you are talking about and do the array logic there. About width and height, those are more of css and design related thing rather than drag related.
@alexeyfilippov42 Жыл бұрын
надо попробовать, а то все делают с react-dnd
@utkumattaktas7994 Жыл бұрын
I just wanted to ask you why did we use useRef instead of regular state? Is that because we are moving the HTML element?
@thebikashweb Жыл бұрын
Good question. If you use regular state, then how are you going to make sure each of your elements are going to have the necessary value needed to identify or vary? We want to persist value and we don’t want to use setter everytime. Check this article dev.to/salehmubashar/useref-or-usestate-which-is-better-258j
@sroger11 ай бұрын
You shouldn't use either one of them. Instead, use a simple 'let' to declare a variable. Using 'Ref' or "State' to store a simple integer is overkill and a waste of resources. Thank you for the great video btw. @@thebikashweb @utkumattaktas7994
@appstuff656510 ай бұрын
does this listing persist if i refresh ?
@thebikashweb10 ай бұрын
Chcek another video in my channel about proper way of handling data! Check container drag and drop
@appstuff656510 ай бұрын
@@thebikashweb thanks!
@appstuff656510 ай бұрын
cant find it, is it this one? kzfaq.info/get/bejne/edGam9SGx83aeKM.html @@thebikashweb
@pitermiszcz9434 Жыл бұрын
I see you used an index as a key. This is react's anti pattern.
@thebikashweb Жыл бұрын
You are absolutely right. There should be better index such as id or unique key other than index. That is also crucial when we have to deal with more than one container for instance if we want to drag from one container to another draggable container.
@traezeeofor11 ай бұрын
Doesn't work on mobile 😞
@thebikashweb11 ай бұрын
It will not, those click events or drag events does not work as it is in mobile devices. I will make new video soon about that.
@user-ud4bj9vc7l4 ай бұрын
thx man
@willyhorizont8672 Жыл бұрын
16:38 After a day trying to understand how "Array.splice()" method works and console.log-ing each variable inside "handleSort" function and googling how to not mutate the original data. I think I understand how your "handleSort" function work and I made small update and improvement I think ''' const handleSort = () => { // here I filter fruitItems without dragged item and store it as newFruitItems const newFruitItems = fruitItems.filter((fruitItem, fruitItemIndex) => fruitItemIndex !== dragItem.current); // then I insert the dragged item inside it using "Array.splice()" method newFruitItems.splice(draggedOverItem.current, 0, fruitItems[dragItem.current]); dragItem.current = null; draggedOverItem.current = null; setFruitItems(newFruitItems); }; ''' or even better using the function version of useState hook to use the current state ''' const handleSort = () => { setFruitItems((currentFruitItems) => { const newFruitItems = currentFruitItems.filter((fruitItem, fruitItemIndex) => fruitItemIndex !== dragItem.current); newFruitItems.splice(draggedOverItem.current, 0, currentFruitItems[dragItem.current]); dragItem.current = null; draggedOverItem.current = null; return newFruitItems; }); }; '''
@thebikashweb Жыл бұрын
Thank you! There are several ways to do it, if you check my another video on container drag and drop, I have simplified things there. Whole idea is, we first get the item that we are moving/sorting, then we need to get the position of the item where we want to place that item and place it.