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

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.

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

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 :)

Wow, your video is incredibly vivid and descriptive! You're absolutely killing it, bro! Keep up the awesome work!

Solid teaching skills, sir. I thought I would need a library for drag-and-drop, but you've shown me otherwise. Thanks.

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

Thank you so much bro, I love how simple it is.

Thank you so much, you explained the concept in simple ways.

This video save me from 4 days of stress thks

exactly what i was looking for! thanks

Thank you very much man. You saved me a big time and no extra dependency :) I'm grateful to you.

Bro, you are a legend. Thank you so much.

your really awesome nice one this is what i searched for long time thank you so much your saving my time 😊👌🏼👌🏼👌🏼

Thank you!!!! This helped me a lot!

Thanks. It was very simple solution to understand

THANK YOU VERY MUCH! Great content!

Awesome man. Very great work!

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.

Great, easy and without libraries

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 })

thanks that was really helpful

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 ?

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.

thank a lot

Thanks, man!!!! God bless!

thx bro

works fine

How can we store this new arrangement in a database so it persists?

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

Why are we using useRef for storing the indexes? Can't we just use useState?

Thank you so much!!

Thank you

Thanks mate!

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.

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!

How do mobile phones drag and drop?

Here is another video based on your request: drag and drop to different container -> kzfaq.info/get/bejne/edGam9SGx83aeKM.html

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 ?

Tks!!! 🇧🇷

Need video how to save position for example in local.storage

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 ?

where did you learn all this sir!!

How to make it possible to nest one element within another using drag and drop?

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?

надо попробовать, а то все делают с react-dnd

I just wanted to ask you why did we use useRef instead of regular state? Is that because we are moving the HTML element?

does this listing persist if i refresh ?

I see you used an index as a key. This is react's anti pattern.

Doesn't work on mobile 😞

thx man

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; }); }; '''