Drag and drop in react was a lot easier than I thought

Поділитися
Вставка
  • Опубліковано 15 вер 2024
  • 💬 Discord / discord
    🔔 Newsletter newsletter.web...
    📁 GitHub github.com/web...
    📺 Twitch / webdevcody
    🤖 Website webdevcody.com
    🐦 Twitter / webdevcody

КОМЕНТАРІ • 109

  • @dhunsworth
    @dhunsworth Рік тому +32

    I always had in my mind that this would be super complex and definitely a situation to go looking for some package that would make it reasonable. Thanks for showing us this!

  • @buraksurumcuoglu8303
    @buraksurumcuoglu8303 Рік тому +15

    I just got out of a meeting on my dev job and we talked about a new page with drag and drop functionality, your timing is incredible 😅

  • @saman6199
    @saman6199 Рік тому +14

    This is awesome, I always avoided to even try this feature, because I thought it could be complicated. But you made it look so easy with your walkthrough. Will definitely give it a shot. Thanks for your effort 😊

  • @51Grimz
    @51Grimz Рік тому +3

    Useful video on a quick and simple native drag and drop without any libraries or anything! Follow up to this would be dragging and dropping in any index of the droppable area. Say you drag Widget C in between Widget A and B. Not just appending it to the end.

    • @estoupensa27
      @estoupensa27 Рік тому

      Do you know how to drag and drop inside of the droppable area?

  • @selahadinjemal7138
    @selahadinjemal7138 5 місяців тому +1

    I just saw this in a job posting as a best to have skill and wanted to check it out. simple, effective, no blabber. Thanks!

  • @eveguelarocha9961
    @eveguelarocha9961 Рік тому +1

    I think just last week, I needed this kind of code in react, I ended up searching for code then copied and pasted it and just changed variables and stuff and it worked, but this video made me realize I need to recode it and do it with my own logic to improve my skills, Thanks mate! I thought it was so complicated, was thinking to use, dom manipulation etc but i think, i think too much on the problem. Thank you again, will keep following your page for more advice !

  • @Gabrielmo00
    @Gabrielmo00 5 місяців тому

    Best tutotial! I have had trouble with react drag and drop libraries in the past. I was in need to start a new project that woul require a simple drag and drop, and your example give me the kickstart that I need. Thanks man!

  • @Earth_Elegance_
    @Earth_Elegance_ 3 місяці тому

    Thank you. This is easy than I thought. I realized it because of you

  • @Rico-cp4xp
    @Rico-cp4xp 5 місяців тому

    Been looking into dnd lately, crazy how simple that is. Great video as always 👍

  • @siva002
    @siva002 Рік тому

    So much easier to understand. Thank you. You saved me the trouble of going with react-dnd or dnd-kit which are very sophisticated, but overkill. As long as we don't need mobile or too much cross browser compatibility ( for example, internal websites), this is more than enough.

  • @ilovelctr
    @ilovelctr Рік тому

    Wow, thanks a ton for this splendid tutorial! I didn't think this could be implemented using such exquisitely clean code, and thought that it might end up as equally annoying as if otherwise built via vanilla JavaScript and real DOM manipulation. Absolutely appreciate how elegant this is.

  • @saladin_advanced
    @saladin_advanced 27 днів тому

    Best video explaining drag n drop.

  • @nonstopper
    @nonstopper Рік тому +23

    Now make it re orderable

    • @zzzyyyxxx
      @zzzyyyxxx Рік тому +2

      DND Kit makes this super easy to do

    • @harithmu
      @harithmu 7 місяців тому +1

      you have a repo? because i find it very hard to do it where its something like in vid. (drag n drop but original item still there)

    • @ivan.jeremic
      @ivan.jeremic 2 дні тому

      dndKit is amazing but the performance pf solidjs would be nice, if there where a similar lib in solidjs K would switch to solid

  • @FXTripazha
    @FXTripazha Рік тому

    Easier than I expected, thanks! Subscribed

  • @ZACKDEV
    @ZACKDEV Рік тому

    Wow you made learning this super easy, I was looking into this feature recently with a lot of complicated topics. This make is super simple for us to recreate it and experiment!

  • @matze489
    @matze489 Рік тому

    this is amazing, i thought i would need to use some lib todo that but with knowing these events its actually pretty easy todo it on you own

  • @ThisIsLiving__
    @ThisIsLiving__ Рік тому +1

    I have always had a project in mind requiring me to use this feature - but eventually, the complexity of my ambition made me never do it but I ll definitely do it now

  • @blu5037
    @blu5037 Рік тому

    Nice video! Never implemented this feature, but for a long time I thought we'd have to track the cursor position and everything. Cool to see that it can be implemented with little lines of code.

  • @Vimal-tr3tl
    @Vimal-tr3tl 3 місяці тому

    Minimal much needed. Thank you.

  • @andlukas
    @andlukas 2 місяці тому +1

    i want to reproduce the behavior of google calendar, when you drag the amount of hours of an event

  • @rredington305
    @rredington305 5 місяців тому

    I've got this part sorted 👍🏼 next im working on a DnD sortable list using standard React without success. Pls make a DnD sortable list video 🙏🏻

  • @glcorreia
    @glcorreia Місяць тому

    I thought this would require plugins and a lot more code. Thanks for sharing

  • @MahmoudBA
    @MahmoudBA Рік тому

    you made it look so easy great work!

  • @ReDestro69
    @ReDestro69 Рік тому

    Enjoyed this video. Apparently, I'm working on a client project where I'm building a module very similar to DocuSign. I'll be dragging different fields onto the document and assigning users to each field to fill out/sign.

  • @saladin_advanced
    @saladin_advanced 27 днів тому

    It's kind easy finally. thx.

  • @noahwinslow3252
    @noahwinslow3252 Рік тому

    I've been interested in making a game like stacklands for a while, perfect fun project with drag and drop

  • @MubashirullahD
    @MubashirullahD Рік тому

    That was so cool. And Im actually going to use for a professional use case. Need to build something to match pictures with words.

  • @TheSourLemonz
    @TheSourLemonz Рік тому

    Very informative, nice work

  • @ameen8891
    @ameen8891 4 місяці тому

    Thanks BRoo

  • @hellome3046
    @hellome3046 4 місяці тому

    thank you very much

  • @Ayush_Bob
    @Ayush_Bob Рік тому

    That was suprisingly easy thanks a lot and easy to build upon

  • @haze4828
    @haze4828 Рік тому +1

    Would be pretty cool to make it remove the item from the original container once the drop has occurred, although I don't know how long that would take me to figure out 😅

  • @tiktalk4573
    @tiktalk4573 5 місяців тому

    Thanks this is useful for us!

  • @vydikvaidya654
    @vydikvaidya654 Рік тому +1

    Can I know how to display the HTML code for the item when it's dropped

  • @TheBswan
    @TheBswan Рік тому +1

    Dnd-kit is the best library for this

    • @ZACKDEV
      @ZACKDEV Рік тому

      LOL WHAT THE HECK! it literally is the best!

  • @ryanwoods3333
    @ryanwoods3333 Рік тому +1

    great video! would you consider doing a video in React where a user can click on a product for example and show a pop up modal? So there would be multiple modals with different content. Not sure how to do this in pure React without installing some NPM package...

    • @WebDevCody
      @WebDevCody  Рік тому +2

      thank you for the super thanks! I could potentially do that for a react challenge video when I get time

  • @pauloricardomaltaleal3558
    @pauloricardomaltaleal3558 4 місяці тому

    How can i pick the position when drop, according to dimensions of father component?

  • @xeliqa3921
    @xeliqa3921 Рік тому

    how convenient. Am actually looking to build a project with this functionality, similar to a trello board.

  • @estheryang6450
    @estheryang6450 9 місяців тому

    Thank you for the explanation! Will love to ask what is the name of the extension you use to show component?

  • @GabrielWis
    @GabrielWis Рік тому

    Hi ! I have a problem. When I writing ([]) at state, show error "string is undefined".

  • @jorims8537
    @jorims8537 Рік тому

    nice idea with using the state and just appending elements. However, the usecase for this is very limited. If the position (order) matters in which I would drag my element in, it would obviously not work.

  • @eip408
    @eip408 Рік тому

    Awesome stuff! I was also looking for a way to do this drag n drop functionality because I was doing a personal project like shopify customizer. Thanks!

  • @panagiotiskyriacou61
    @panagiotiskyriacou61 11 місяців тому

    imagine that when drop widget tothe left create different categories that group the widget. So also the category component is a drop target. It is possible the category (drop target)be also a draggable item so you can merge two categories?

  • @dr.livesey5157
    @dr.livesey5157 Рік тому

    Thanks!

  • @ifeanachofavour409
    @ifeanachofavour409 Рік тому

    Hi that is really cool and I do currently have need for a drag and drop implementation.
    Wanted to ask if you could attach a link to the documentation for this.
    Hoping to hear from you soon. Thanks

  • @maxclouatre2703
    @maxclouatre2703 Рік тому

    Love this! Custom starter or did you find this in the Vite docs? Thanks!

  • @waytonirvana6426
    @waytonirvana6426 Рік тому

    clean and helpfull thank you

  • @r1nzai
    @r1nzai Рік тому +1

    I'd rather use react-beautiful-dnd which is used internally for trello and jira as well, and is like super easy to implement

    • @keifer7813
      @keifer7813 Рік тому

      What's the cost though? In terms of bundle size and page speed?

    • @Victor-dt1uq
      @Victor-dt1uq Рік тому

      It is no longer maintained though :(

  • @juanorjuela7161
    @juanorjuela7161 7 місяців тому

    Hello, I really liked your video. I would like to know if there is a repository where I could see the code better or collaborate since a couple of ideas occur to me.

  • @omomer3506
    @omomer3506 Рік тому

    Nice, but something i didnt catch, the e.datatranfer carries the actual widget with all of its properties and styles? Ir is something else going jn

    • @WebDevCody
      @WebDevCody  Рік тому

      It might have a reference to the underlying dragged element, but it’s more for setting custom metadata you can use later when dropping

  • @Tregadbm
    @Tregadbm Рік тому

    Wait, how are your elements fully opaque while dragging and animate back on unsuccessful drag?
    Could it be your browser? I'm using chrome.

    • @WebDevCody
      @WebDevCody  Рік тому

      Must be built into the browser because I didn’t add styles

  • @ArynKr
    @ArynKr Рік тому

    Loved it... Btw what color scheme are you using on vs code?

    • @WebDevCody
      @WebDevCody  Рік тому

      bearded theme stained blue

    • @ArynKr
      @ArynKr Рік тому

      @@WebDevCody Thanks 😀

  • @criztiandev
    @criztiandev Рік тому

    Hi I just want to ask, how about free drag, could you make a video about it ?

  • @SMTarcisio
    @SMTarcisio Рік тому

    Hi, I'm from Brazil, I'm new in Javascript and React Js, cool video, so perfectly understandable but I'm trying to make a different thing, an image be drag n drop inside a div and this div has limit of the corners, when the user drag it around off limit of the corner it brings the image back to limit of the div without any package, can you help me with this?

    • @WebDevCody
      @WebDevCody  Рік тому

      I’m not sure I don’t work much with drag and drop

  • @deepmane5845
    @deepmane5845 Місяць тому

    locally it is easier how about on server
    save newly formed/droped data to sever but it takes time
    meanwhile on ui it happens quickly so
    my app is todo app in which task are divided such way that complete and incomplete
    if i drag incomplete task to complete it changes data to true on server using redux
    but on ui it takes time to load again how to deal with my app i hope you understand

  • @chesterxp508
    @chesterxp508 9 місяців тому

    GoodJob!

  • @ZeNiTh_2K
    @ZeNiTh_2K Рік тому +1

    Out of context but which VS Code theme is that ?

  • @amirshaban7115
    @amirshaban7115 Рік тому

    Could someone help me out with making it functional with touchEvents instead of dragEvents?

  • @appstuff6565
    @appstuff6565 11 місяців тому

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

    • @appstuff6565
      @appstuff6565 11 місяців тому

      you loved the vcomment but can you please guide on something, i am building a linktree clone as a study learnning and i have tables users and links, i fetch links from supabase for that particular user. My main issue is when i fetch links i want them to be fetched as i arrange them in the list. How do i persist that? Thanks.

  • @artistry7919
    @artistry7919 Рік тому

    How can we make a drag and drop feature keyboard accessible?

    • @WebDevCody
      @WebDevCody  Рік тому

      Not sure, maybe enter to select the item, then left and right arrows to move it around between drop zones?

  • @CaliburPANDAs
    @CaliburPANDAs Рік тому +1

    Have you tried React dndkit?

  • @oguzhan2393
    @oguzhan2393 Рік тому

    how can I drop the div whereever I want.

  • @muhammad-shahin
    @muhammad-shahin 9 місяців тому

    can I get this code? did you upload it on github?

  • @oddsquadd
    @oddsquadd Рік тому

    the issue is that it is not working with mui icons

  • @DekanTrue111
    @DekanTrue111 Рік тому

    Well does it work with touch?
    In the past I have had to use react dnd with two logic handlers. Is this not needed anymore?

    • @WebDevCody
      @WebDevCody  Рік тому

      Oh I didn’t try with touch, good point

  • @micheledibe
    @micheledibe Рік тому

    Nice tutorial, well explained, although this implementation, which the native Drag&Drop,
    is pointless since since is not supported on mobile devices.
    In other words, lets be honest, we gonna need third party libraries for ever 😂

  • @jittojoyes7533
    @jittojoyes7533 Рік тому

    Are you using any package here, like react dnd

  • @appstuff6565
    @appstuff6565 11 місяців тому

    but how do you persist this?

  • @umargulzar2982
    @umargulzar2982 Рік тому

    can you please provide GITHUB link for source code?

    • @WebDevCody
      @WebDevCody  Рік тому

      sorry I don't think I have it, it's too much work for me to upload code for every single video. Just learn what I taught and re-implement is my suggestion.

  • @anagocode
    @anagocode Рік тому

    is this react-dnd or react-beautiful-dnd ?

    • @WebDevCody
      @WebDevCody  Рік тому

      This is just html events I think

  • @shubhampawar7921
    @shubhampawar7921 Рік тому

    Doesn't work on mobile though.

  • @SeibertSwirl
    @SeibertSwirl Рік тому +1

    Good job babe!! Also first!

    • @WebDevCody
      @WebDevCody  Рік тому

      thanks babe! you're back getting first place comments again

    • @YuriC.
      @YuriC. Рік тому +1

      That's not fair, she knows when a video is about to drop 🧐

    • @WebDevCody
      @WebDevCody  Рік тому +1

      @@YuriC. insider trading 😂

  • @someunknowngirl7208
    @someunknowngirl7208 Рік тому

    Very basic and odd example specially when u do setWidgets and spredding state instead of using cb with prev param

    • @WebDevCody
      @WebDevCody  Рік тому

      How’s that odd? You don’t need the callback anytime you update state

  • @muruga3603
    @muruga3603 Рік тому