React drag and drop sort list

Подписаться 2 тыс.

Просмотров 50 тыс.

50% 1

In this video I am showing you how to create a drag and drop list in React without using any third-party library. This is the basic form and you can animate it to fit your needs.
💬 Questions and chat : / discord
💬 Book one-to-one session with me : topmate.io/bikashxsharma
⭐ Features - Key ideas you will learn from this video are: ⭐
🔸 React drag and drop
🔸 React list sorting by drag and drop
⭐ Tech Stacks ⭐
🔸 React
🔸TypeScript
🔸CSS
Find latest video with persisted data: • React drag and drop to...
➤ Connect with me on Linkedin: / bikashxsharma
➤ Live Demo: bw-reactdnd.netlify.app/
➤ Discord: / discord
➤ Github Repository: github.com/thebikashweb/react...
Other videos:
➤ React Interview task: • This was my first reac...
➤React multi step form: • How to make multi step...
➤ Search bar filter: • Create A Search Bar Fi...
➤ Dynamic form: • How to create Dynamic ...
➤ API call for production: • API calls for producti...
➤ React Country App Portfolio project: • Let's build a complete...
➤ Easy Redux tutorial : • Redux easy explanation...
➤ React Router 6 video: • React Router v6 Tutori... 8
➤ React Router Protected Route: • react router v6 tutori...
⭐ Timestamps ⭐
00:00 Introduction
00:58 Design and overview
02:23 Drag related events and functions
13:06 Change position of items on drag
React drag and drop
React drag and drop without library
Drag and drop list in React
How to make drag and drop in react
#rreact #reactdraganddrop #reactdnd

Опубликовано:

27 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 66

@thebikashweb 7 месяцев назад

Here is another video which answers most of your questions such as sorting in mobile devices, persist the sorting in localStorage. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6v8HL0aVKDs.html

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

@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

@akhtarhssn 8 месяцев назад

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

@alizeynalov7395 Год назад

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

@starlordjs Год назад

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

@XdemonX97 Год назад

Awesome man. Very great work!

@trobosko 9 месяцев назад

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

@karanbhati2373 Год назад

exactly what i was looking for! thanks

@Guilherme-uu8ql Год назад

THANK YOU VERY MUCH! Great content!

@ANKITSHARMA-ck6ln 8 месяцев назад

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

@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.

@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!

@viniciusm.m.7822 2 года назад

Thanks, man!!!! God bless!

@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.

@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.

@user-zj2gp7qx1y 9 месяцев назад

Thanks. It was very simple solution to understand

@yoiler_cordoba 2 года назад

Thank you so much!!

@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

@historiaseneltiempo6954 Год назад

Great, easy and without libraries

@misaelchavezramos2416 7 месяцев назад

This video save me from 4 days of stress thks

@FGA-47 11 месяцев назад

thanks that was really helpful

@rafaelmacedo7155 2 года назад

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.

@silviualexandruparaschiv9838 2 года назад

Thanks mate!

@leemanhcuong Год назад

thank a lot

@shankars101 Год назад

Thank you

@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 ?

@caiqueandrade1342 Год назад

Tks!!! 🇧🇷

@DEVONGAMES2115 3 месяца назад

works fine

@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 ?

@appstuff6565 9 месяцев назад

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

@user-wc5tc8vr6q 5 месяцев назад

thx bro

@karanselvaraj8503 Год назад

where did you learn all this sir!!

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

@priyapandey8951 4 месяца назад

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

@pedrovitor1434 2 года назад

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!

@thebikashweb 2 года назад

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

@appstuff6565 9 месяцев назад

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.

@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.

@mayedakonika6606 8 месяцев назад

How do mobile phones drag and drop?

@thebikashweb Год назад

Here is another video based on your request: drag and drop to different container -> ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-CkjhqUbgvHo.html

@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.

@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

@sroger 10 месяцев назад

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

@EugeneVe 7 месяцев назад

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

@thebikashweb 7 месяцев назад

Here you go ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6v8HL0aVKDs.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.

@alexeyfilippov42 Год назад

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

@appstuff6565 9 месяцев назад

does this listing persist if i refresh ?

@thebikashweb 9 месяцев назад

Chcek another video in my channel about proper way of handling data! Check container drag and drop

@appstuff6565 9 месяцев назад

@@thebikashweb thanks!

@appstuff6565 9 месяцев назад

cant find it, is it this one? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-CkjhqUbgvHo.html @@thebikashweb

@traezeeofor 10 месяцев назад

Doesn't work on mobile 😞

@thebikashweb 10 месяцев назад

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.

@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.

@user-ud4bj9vc7l 3 месяца назад

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.