React course: Build a drag and drop Kanban Board: Typescript, Tailwind, Dnd-Kit multiple containers

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ม.ค. 2025

ความคิดเห็น • 244

  • @klitonbare
    @klitonbare  2 หลายเดือนก่อน +2

    Source Code ( for patreon sponsors ⭐): dub.sh/tYw2ph6

  • @HP-ol2ux
    @HP-ol2ux ปีที่แล้ว +26

    I am using dnd kit in my job project and I didn't learn it well just by reading the documentation. This explained everything to me. Thank you, you are awesome

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Glad it was helpful!

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      Check out also the last video: "Form builder": i use dnd-kit there in a different way compared to the kanban board video :)

    • @HP-ol2ux
      @HP-ol2ux ปีที่แล้ว

      Will do, thx! :)@@klitonbare

    • @keylorjimenez7891
      @keylorjimenez7891 3 หลายเดือนก่อน

      @@HP-ol2uxI need some help with DND kit will you help me?

  • @MrCommutateur
    @MrCommutateur 7 หลายเดือนก่อน +1

    Many Thanks!! This was much better than the official documentation!

    • @klitonbare
      @klitonbare  7 หลายเดือนก่อน

      Wow, thanks a lot!

  • @fullstackstudent
    @fullstackstudent ปีที่แล้ว +24

    What a brilliant tutorial. I couldn't find any good documentation for DND kit but you have broken it down extremely well. Please keep up the good work and keep the tutorials coming! Thank you.

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      Thank you 😁😁

  • @christopherlawrenc_
    @christopherlawrenc_ 8 หลายเดือนก่อน +7

    This is exactly what I was looking for. Very well done. I appreciate you taking the time to explain dnd-kit in this way!

    • @klitonbare
      @klitonbare  8 หลายเดือนก่อน +1

      Thank you! Check also the form builder video, i’m using dnd-kit there too! 👍

    • @christopherlawrenc_
      @christopherlawrenc_ 8 หลายเดือนก่อน +1

      @@klitonbare Lol that is exactly what I'm building! I'll take a look.

  • @Teckstudio
    @Teckstudio 24 วันที่ผ่านมา +1

    Excellent tutorial! Thanx! 🤩

    • @klitonbare
      @klitonbare  24 วันที่ผ่านมา

      Thanks a lot!!

  • @aimeuramin
    @aimeuramin 5 หลายเดือนก่อน +7

    Best dnd-kit tutorial ever! Thanks for the effort.

    • @klitonbare
      @klitonbare  5 หลายเดือนก่อน +1

      Wow, thanks!

  • @JonathanRodriguez-lu9yv
    @JonathanRodriguez-lu9yv 19 วันที่ผ่านมา +2

    Best dnd-kit tutorial ever! Thanks for that

    • @klitonbare
      @klitonbare  18 วันที่ผ่านมา

      Wow, thanks!

  • @AmbreCaldin
    @AmbreCaldin 10 หลายเดือนก่อน +1

    brilliant tutorial, I followed it from the start to the end and didnt encounter a single bug, it went smoothly thanks to your explanations and clarity ! Amazing work, thanks a lot

    • @klitonbare
      @klitonbare  10 หลายเดือนก่อน +1

      Great to hear! Thank you!

  • @vorche_
    @vorche_ 9 หลายเดือนก่อน +4

    Man watching you code makes it so simple

    • @klitonbare
      @klitonbare  9 หลายเดือนก่อน +1

      Thank you!

  • @steevelsharonsalis6564
    @steevelsharonsalis6564 ปีที่แล้ว +9

    This is my first React project with TypeScript, and I absolutely loved it. Thank you. You are off to a good start with this being the first video on your channel. Looking forward to more projects.

  • @juliamendes6617
    @juliamendes6617 ปีที่แล้ว +4

    This tutorial is amazing. Your explanations are clear and it was easy to follow. Thank you so much for this!

  • @DanilaMinin
    @DanilaMinin 8 หลายเดือนก่อน +4

    Since I lost hope to successfully use beautiful dnd with typescript, I had to do it manually and tired and couldn't manage it.
    Found yours explanation for dndKit. It is a miracle) Good job. Thank you!)
    Beautiful dnd is evil

    • @klitonbare
      @klitonbare  8 หลายเดือนก่อน

      Thank you :)

  • @extremes3605
    @extremes3605 11 หลายเดือนก่อน +2

    thank you so much this is a very clean and thorough explanation

    • @klitonbare
      @klitonbare  11 หลายเดือนก่อน

      Thank you!

  • @2kceltics
    @2kceltics 9 หลายเดือนก่อน +1

    I'll recommend you to use react-icons you won't need copy the svg into a new component anymore. Instead you'll copy the import line wherever you need in your project. That's all you will be able to use your component at every moment !
    Great video. Regards from Argentina !

  • @PandulaWeerasooriya
    @PandulaWeerasooriya 7 หลายเดือนก่อน +1

    Thank you!. This was a briliant tutorial from beginning to the end.

    • @klitonbare
      @klitonbare  7 หลายเดือนก่อน

      Glad you enjoyed it!

  • @alexizhernandez8011
    @alexizhernandez8011 ปีที่แล้ว +2

    This was a great video! I learned a lot about dnd-kit, which was my goal with watching this video. I did find a small bug though. When I create 3 columns and I drag a task from column 1 to column 3, then I drag it back to column 1, it will make the columns themselves switch positions.

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Thank you for pointing out :)!

  • @bilalhaider1233
    @bilalhaider1233 ปีที่แล้ว +1

    man that was a pretty amazing functionality. Loved this project! Thanks

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      Glad you liked it!

  • @narendrakajla77
    @narendrakajla77 5 หลายเดือนก่อน +1

    what an amazing tutorial, everything explained in detail, without skipping anything, with a lot of patience & humble communication style.
    Really really learned a lot, not just dnd kit actually, but some extra things as well like some new css which i have never used and way of writing & managing code.
    Now i am confident that i can use dnd kit and do the modifications as per my requirements
    Thank You... so much ❤
    Subscribed and liked, please keep making such amazing tutorials as i can see till now there are 4 videos and each of them is having something unique projects then random youtube trends. 🔥🔥
    I will watch the rest other videos as well soon once i find some time on weekends and learn new stuff. Also waiting for new videos like this.
    Respect for the efforts. Thanks again. 😃

    • @klitonbare
      @klitonbare  5 หลายเดือนก่อน +1

      Thanks a lot! If you are interested in dnd-kit tutorials you can check the FormBuilder video ( i use dnd kit in the designer component )

  • @miraclenerdkidchiki6249
    @miraclenerdkidchiki6249 ปีที่แล้ว +1

    I love the simplicity of your videos and how you explain stuf...most tutorials kinda expect you to know these stuff
    You just got a subscriber 👌

  • @roshandalami
    @roshandalami ปีที่แล้ว +1

    I was looking for DnD feature for a while . and I found you . Great tutorial ❤❤❤

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Awesome! Thank you!

  • @TuanTran-zc5ei
    @TuanTran-zc5ei หลายเดือนก่อน +1

    Hi Kliton Bare.
    I want to say "thank you" to you a lot.
    You save my life. Hope u continue doing this kind of things in the future. it's very helpful to me.
    Thank you

    • @klitonbare
      @klitonbare  หลายเดือนก่อน

      Happy to hear that! 😀😀😀

  • @TheWhoIsTom
    @TheWhoIsTom ปีที่แล้ว +1

    Really love the tutorial.
    Small tip: Windows and Linux: Alt + ↑ (Up arrow) to move line up, Alt + ↓ (Down arrow) to move line down.
    Mac: Option + ↑ to move line up, Option + ↓ to move line down.

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      I’m happy you enjoyed it. Those are god tips. I usually work with vim keybindings, but I turned them off for the video.

  • @armaan5413
    @armaan5413 10 หลายเดือนก่อน +1

    Thank you for the tutorial. Really enjoyed it

    • @klitonbare
      @klitonbare  10 หลายเดือนก่อน

      Thank you!!!

  • @user-is6yo3um7x
    @user-is6yo3um7x 13 วันที่ผ่านมา +1

    Nice work, love the pacing of the video :)

    • @klitonbare
      @klitonbare  9 วันที่ผ่านมา

      Thanks a lot!

  • @muhammadfaizantariq7841
    @muhammadfaizantariq7841 ปีที่แล้ว +1

    Thanks for amazing tutorial on Kanban Board with React

  • @Glissadist
    @Glissadist 11 หลายเดือนก่อน +1

    Great tutorial! Complex stuff for a newer coder but very well done!

    • @klitonbare
      @klitonbare  11 หลายเดือนก่อน

      Much appreciated!

  • @VY-zt3ph
    @VY-zt3ph 8 วันที่ผ่านมา +1

    You got 20k subscribers with just 5 videos bro. That's a huge achievement.

    • @klitonbare
      @klitonbare  7 วันที่ผ่านมา

      Thanks a lot! You're right!

  • @b1oodzy
    @b1oodzy 11 หลายเดือนก่อน +3

    Hi I need to mention that you forgot to make the "0" change based on the amount of tasks in the column.
    I wasn't going to use this anyway but I think others would.
    Eitherway, amazing tutorial. It really helped me understand how React works.

    • @klitonbare
      @klitonbare  11 หลายเดือนก่อน

      Yes, you are right. Thank you

    • @Cardonfamily
      @Cardonfamily 11 หลายเดือนก่อน +1

      I found mine with the following -
      {(tasks.filter((task) => task.columnId === column.id)).length}

  • @VY-zt3ph
    @VY-zt3ph 13 วันที่ผ่านมา +1

    We need more projects bro!!! Don’t stop

    • @klitonbare
      @klitonbare  9 วันที่ผ่านมา

      Thanks!

  • @namejo7822
    @namejo7822 ปีที่แล้ว +1

    i recently started learning React and I'm looking for tutorials to code along.. this one was soooo good, thx! just subscribed

  • @sahilverma_dev
    @sahilverma_dev 6 หลายเดือนก่อน +1

    Thanks sir for such great content.

    • @klitonbare
      @klitonbare  6 หลายเดือนก่อน

      Thanks and welcome

  • @niteshprajapat7918
    @niteshprajapat7918 ปีที่แล้ว +2

    Need more tutorials like these 🎉

  • @4surajgo
    @4surajgo ปีที่แล้ว +1

    A very great video learned something new
    Keep up the good work

  • @sixtusonyedibe1619
    @sixtusonyedibe1619 หลายเดือนก่อน +1

    This is super cool bro. I appreciate.
    Unfortunately, I can't access dnd-kit documentation and this has been helpful so far.

    • @klitonbare
      @klitonbare  หลายเดือนก่อน

      Glad it helped

  • @0mEtAlx0
    @0mEtAlx0 ปีที่แล้ว +1

    Thanks a lot for sharing! Dndkit docs are gargabe, this is great, keep it up

  • @abdullahkhalid9885
    @abdullahkhalid9885 ปีที่แล้ว +1

    I loved your tutorial, it was amazing!

  • @smritipradhan6921
    @smritipradhan6921 ปีที่แล้ว +1

    Amazing !!
    Thank you so much for the Video

  • @maxcelosdev
    @maxcelosdev 27 วันที่ผ่านมา +1

    Excellent tutorial! Thank you.

    • @klitonbare
      @klitonbare  27 วันที่ผ่านมา

      Glad you enjoyed it!

  • @osman3610
    @osman3610 3 หลายเดือนก่อน +1

    You're the best!! Appreciate for this tutorial, you save my day

    • @klitonbare
      @klitonbare  3 หลายเดือนก่อน

      Glad to hear that!

  • @CopperEngineerEs
    @CopperEngineerEs ปีที่แล้ว +1

    Just beautiful ❤❤❤❤

  • @WiolettaMiazga-ru8cx
    @WiolettaMiazga-ru8cx 9 หลายเดือนก่อน +1

    It's awesome, thank you so much ❤

    • @klitonbare
      @klitonbare  9 หลายเดือนก่อน

      Thank you!

  • @kevinarley6958
    @kevinarley6958 ปีที่แล้ว +1

    Ey! You are incredible. I needed this content for apply a similar solution in my work. Thanks. I love you. jajaj ♥

  • @rikiiki7114
    @rikiiki7114 ปีที่แล้ว +1

    this really helps my learning process, thanks a lot sir

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Happy to hear that 😃

  • @devsuthar6795
    @devsuthar6795 3 หลายเดือนก่อน +1

    Bro how easily you made me understand this thing. best tutorial for react DND. thank u 👍👍

    • @klitonbare
      @klitonbare  3 หลายเดือนก่อน

      Glad to hear that 👍👍👍

  • @ixo-p6917
    @ixo-p6917 10 หลายเดือนก่อน +1

    Hey man
    Thanks for the component + amazing tutorial
    Keep up the good work mate

    • @klitonbare
      @klitonbare  10 หลายเดือนก่อน

      Thanks, will do!

  • @anuvette
    @anuvette ปีที่แล้ว +1

    this is so beautiful ahhh

  • @Totsuka_sword
    @Totsuka_sword 17 วันที่ผ่านมา +1

    Half Way completed. Amazing tutorial.
    Edit: Completed. Now introducing Redux state and API calls

    • @klitonbare
      @klitonbare  17 วันที่ผ่านมา

      Awesome 🤩

  • @migliorelli
    @migliorelli ปีที่แล้ว +4

    For those who are having the problem of tasks or containers of different sizes being stretched:
    instead of using CSS.Transform, use CSS.Translate

  • @gabeabeaaa
    @gabeabeaaa ปีที่แล้ว +1

    amazing video!

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Glad you think so!

  • @jaytalekar6184
    @jaytalekar6184 ปีที่แล้ว +1

    Extremely Helpful😀😃

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Glad you think so!

  • @aryaman958
    @aryaman958 หลายเดือนก่อน +1

    Well explained !!

    • @klitonbare
      @klitonbare  หลายเดือนก่อน

      Thanks!

  • @WILLMARFERNANDOROMEROMARIN
    @WILLMARFERNANDOROMEROMARIN ปีที่แล้ว

    muy buen tutorial, me permitió aprender de principio hasta el final

  • @Prince_515
    @Prince_515 ปีที่แล้ว +2

    Nice job, keep the vids coming

  • @TalhaSeven
    @TalhaSeven 9 หลายเดือนก่อน +1

    very nice, thank you

    • @klitonbare
      @klitonbare  9 หลายเดือนก่อน

      Thank you too!

  • @peachpiez
    @peachpiez ปีที่แล้ว +1

    Great content, absolutely love this! But auto import didn’t work for me so I had to stop and stare at your auto suggestion to see where you go it from 🤣
    It would be great if you could show the import too!

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      On new videos i will do that. Thank you for the feedback.

  • @orlandoferazzani3639
    @orlandoferazzani3639 8 หลายเดือนก่อน +1

    This video helped me a lot even though i dont like tailwind. One thing that i would've done differently is to add the explanation on how do make it persistent, in the sense that, i would use this as a todo list, and its pointless if after every refresj everything disappears. Other than that, i really liked the video

    • @klitonbare
      @klitonbare  8 หลายเดือนก่อน +1

      Thank you! 🙏 In the future, I plan to update this video to include database persistence and other features. 🙂

  • @MohamedElguarir
    @MohamedElguarir 7 หลายเดือนก่อน +1

    Thanks man 🙏
    I like the accent 😅🔥

    • @klitonbare
      @klitonbare  7 หลายเดือนก่อน

      Thanks! 😃

  • @ggsingla
    @ggsingla 5 หลายเดือนก่อน +1

    Hey Kliton,
    This is a great overview for dnd-kit, loved your explanation style. I do have a doubt though, can you explain why we need to have a separate context for each column, actually I was thinking that the top-level column context can be used for the tasks as well?
    also,
    If we are having different contexts then how are we able to jump the elements from one context to the other when we are dragging them across columns

    • @klitonbare
      @klitonbare  5 หลายเดือนก่อน

      Hi @ggsingla, if i remember correctly we need separate context for each column because each context will also handle sorting etc of its children. So is better to have 1 context for each "scrollable droppable container" that you have, otherwise you need to handle the order manually ( across multiple elements of different types: columns and tasks )

  • @feliciahaggard2
    @feliciahaggard2 2 หลายเดือนก่อน +1

    Hit 43:59 and my tasks are Not showing up. I have followed the tutorial to the t and it just isn't working. I tried looking at the repo to see where I went wrong and I'm expected to pay for it.

    • @klitonbare
      @klitonbare  2 หลายเดือนก่อน

      Hi, can you join the discord and share your code? so i can try to help you :)

  • @nurhamsah_tech
    @nurhamsah_tech 11 หลายเดือนก่อน +1

    thanks 💯💯

    • @klitonbare
      @klitonbare  11 หลายเดือนก่อน

      💪🏼

  • @carlosmarioaraujo
    @carlosmarioaraujo ปีที่แล้ว +1

    Amazing! Thank you!

  • @AFTstorm
    @AFTstorm 6 หลายเดือนก่อน +1

    i get something way different when implementing isdragging. For me the element that i drag changes as well even tho it is only the dragoverlay that should be (or other way around idk)

    • @klitonbare
      @klitonbare  6 หลายเดือนก่อน

      This should not happen. Are u using the DragOverlay correctly?

  • @mohsenaslani170
    @mohsenaslani170 11 หลายเดือนก่อน +1

    thank you. very helpful. but i didn't understand why you added 0 in column title section. are they suppose to be column.length + 1 and you forget to do it?

    • @klitonbare
      @klitonbare  11 หลายเดือนก่อน

      Probably i forgot. At what minute you spot the error? ( so i can check) Thank you

    • @mohsenaslani170
      @mohsenaslani170 11 หลายเดือนก่อน +1

      @@klitonbare thanks for your response. its in 15:15.
      in my first comment i wasn't sure what is it for, but as i checked now, its for task quantity.
      you say we will check how many item (task) is in this column. so i think it should be task.length + 1.

    • @klitonbare
      @klitonbare  11 หลายเดือนก่อน

      @@mohsenaslani170 Ye exactly. Later on in the video ( i don't remember the minute tbh ) i'm updating the zero with task.length +1 :)

  • @lsumail2189
    @lsumail2189 2 หลายเดือนก่อน +1

    i have a question, i found that when i drag the item one over item two, it swap the postion, actually i dont want they change thier positon until i release the drag, but now i drag the item one to the item ten , this process item one change position with item two to item ten. what i want to achieve is that when i drag item over another items, it doesnt swap position, only when i release my hand on the item ten for example, the first item and 10th item swap position, the others keep thier position. so its possible to achieve this , no descriptions on documentation now

    • @klitonbare
      @klitonbare  2 หลายเดือนก่อน

      Hi, sorry for late reply. Have you seen my FormBuilder video? In that video i'm doing exactly what you have described :)

  • @anasmalik3633
    @anasmalik3633 8 หลายเดือนก่อน +1

    wow. nice tutorial. Thanks a lot
    But one Question. I can't move tasks from one column to a newly created empty column..

  • @benixmaximus
    @benixmaximus ปีที่แล้ว +2

    Just finished this tutorial. I love watching tutorials where the presenter has design abilities. I was wondering what you did to have the cursor look like it rotates. Looking forward to starting your remind me app next!

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      Thank you! If you're referring to vscode cursor here is the code to obtain that cursor: "editor.cursorBlinking": "expand" ( put this inside the settings.json file )

  • @YuriyChamkoriyski
    @YuriyChamkoriyski 11 หลายเดือนก่อน +1

    Thank you very much for your excelent video. I think there is a small bug in the final code in your repo. I opened a new issue.

    • @klitonbare
      @klitonbare  10 หลายเดือนก่อน +1

      Thank you

  • @vijaymaliktravels
    @vijaymaliktravels ปีที่แล้ว +1

    This is really helpful in getting started with @dnd-kit.
    One question: Why did you render DragOverlay in a portal?

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Hi thank you. I was using portals to show that you have this option available.

  • @Yuri-h2o
    @Yuri-h2o ปีที่แล้ว

    The backend, dove sono? ✨ Mille gracias por tut

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      Yo, this tutorial actually is focused on client side. I'm thinking about doing a full stack Trello clone on september ( Nextjs13, Prisma, Server actions, Typescript and tailwind ). Thank you btw.

  • @FullStack_OverFlow
    @FullStack_OverFlow 7 หลายเดือนก่อน +1

    Hi, thanks for the tutorial.
    I found bugs, when drag back task to original column it's position will be at the original place before move, no matter what positition i drag.

    • @klitonbare
      @klitonbare  6 หลายเดือนก่อน

      Thanks for the info!

    • @n3trnnr
      @n3trnnr หลายเดือนก่อน

      @@klitonbare Hi! How did you solve this problem?

  • @huynhphatat3919
    @huynhphatat3919 ปีที่แล้ว +1

    I think you should update this app with local storage to store the data when you type or smt. (my personal opinion)

    • @klitonbare
      @klitonbare  ปีที่แล้ว +4

      Hi, thank you for your feedback. I decided to skip those features for now because I wanted to make the video simple and easy to follow. However, I have planned to make a new video on how to build a full stack kanban board with Nextjs13 and Prisma.

    • @huynhphatat3919
      @huynhphatat3919 ปีที่แล้ว +1

      @@klitonbare great, not me but all the followers are waiting your new video. see you soon on new video

  • @stefanvasilica4810
    @stefanvasilica4810 ปีที่แล้ว +1

    Hi, thank you very much for this very nice tutorial
    I have a question: when we create a new task how to make it already focused, thx

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Thank you. Is pretty simple: you can set editMode on the TaskCard component to be true as a default value. const [editMode, setEditMode] = useState(true);
      And you are done.
      Another small improvement that you can make is to auto scroll to the end of column when you add a new task.

  • @osamuaraya2898
    @osamuaraya2898 ปีที่แล้ว +1

    Thank you for the excellent tutorial!! It's really helpful. Actually I found a bug, When I move a task card from the second column to the top of the first column, it slips down to the bottom. If you have free time, Could you please provide instructions on how to resolve it?

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      Hi, after finishing the next video i will check this bug :) Thank you

  • @smritipradhan6921
    @smritipradhan6921 ปีที่แล้ว +1

    I am having problem whie dragging the task container the column container is moving
    the state of actiiveTask is persisting even though I am not dragging it.
    Edited: Solved it by setActiveTask(null) while column is dragged and vice versa

  • @Uncle.K.in2077
    @Uncle.K.in2077 ปีที่แล้ว +1

    Hi, thank you for this awesome tutorial.
    What if i want to make "Fill in the blank feature".
    Like in a question, you will have a paragraph containing blank spaces marked with "@Blank@" placeholders, and a list of choices to fill those blanks within the paragraph. I want to replace each "@Blank@" with a Droppable element and ensure that only one choice can be placed within each Droppable element. I would greatly appreciate hearing insights from an expert like you.

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      HI, you can simply assign to each @blank field a correct answer ( which can be an id for example ) and onDragEnd event you can check what you have dropped on the @blank field, if the id of the dropped element is not the correct one you can can just ignore it onDragEvent.

  • @azuma12
    @azuma12 10 หลายเดือนก่อน +1

    Hi i am unable to move my tasks between columns help me out

    • @klitonbare
      @klitonbare  10 หลายเดือนก่อน

      Hi, what error do u have?

    • @azuma12
      @azuma12 10 หลายเดือนก่อน

      @@klitonbare i have one dndcontext which sorts columns and second sorts tasks inside it however when i drag my task outside of column it goes back to its original postion like i am only able to drag task inside column not in other column

    • @azuma12
      @azuma12 10 หลายเดือนก่อน

      pls reply i need to make this for my project

    • @klitonbare
      @klitonbare  10 หลายเดือนก่อน

      @@azuma12 Probably you have an error on the onDragEnd event: are you sure you're moving the task ( setting a different columnId ) on the new column?

  • @dragonwarrior7246
    @dragonwarrior7246 ปีที่แล้ว +1

    Hey, it was a great tutorial, I have a question how do I make api call to update the task_list_id in database ? I mean where do i make this api call ? I want to update task_list_id after dropping the task in another list please help as quick as possible, i am near a deadline

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      hi. Inside ondragEnd function

  • @jason.zubiate
    @jason.zubiate ปีที่แล้ว

    great video its just so hard to follow along when everything is on a new line lol.

    • @jason.zubiate
      @jason.zubiate ปีที่แล้ว +1

      16:28 is just a headache to look at

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Sorry about that, i will handle that differently in next videos!

  • @khalid_aziz.
    @khalid_aziz. ปีที่แล้ว +1

    I have create this kanban without using typescript
    so i dont need to use interfaces
    can you tell me how you import DragEndEvent, DragStartEvent from @dnd-kit/core?
    and one more question i have completely done this project without typescript
    but i have a problem when i drag any card between two column suppose half is on one column and half is on second column at that moment my app is crash and gives me an error that
    "Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."
    can you please tell me in brief what is happening ?

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      Hi, "Uncaught Error: Maximum update depth exceeded." this means that somewhere you are updating state endlessly.

    • @khalid_aziz.
      @khalid_aziz. 11 หลายเดือนก่อน

      @@klitonbare can you spot the error please
      const onDragOver = (event) => {
      console.log(event, 'onDragOver');
      const { active, over } = event;
      if (!over) return;
      const activeId = active?.id;
      const overId = over?.id;
      if (activeId === overId) return;
      const isActiveATask = active.data.current?.type === 'Task';
      const isOverATask = over.data.current?.type === 'Task';
      console.log({ isActiveATask }, { isOverATask });
      if (!isActiveATask) return;
      //Dropping task over another task
      if (isActiveATask && isOverATask) {
      setTasks((tasks) => {
      const activeIndex = tasks.findIndex((t) => t.id === activeId);
      const overIndex = tasks.findIndex((t) => t.id === overId);
      console.log({ activeIndex }, { overIndex }, { tasks });
      if (tasks[activeIndex].status != tasks[overIndex].status) {

      tasks[activeIndex].status = tasks[overIndex].status;
      return arrayMove(tasks, activeIndex, overIndex - 1);
      }
      return arrayMove(tasks, activeIndex, overIndex);
      });
      }
      const isOverAColumn = over.data.current?.type === 'Column';
      // Im dropping a Task over a column
      if (isActiveATask && isOverAColumn) {
      console.log('Dropping task over col');
      setTasks((tasks) => {
      const activeIndex = tasks.findIndex((t) => t.id === activeId);
      tasks[activeIndex].status = over?.data?.current?.colData?.columnName;
      return arrayMove(tasks, activeIndex, activeIndex);
      });
      }
      };

  • @SalvatoreCognetta
    @SalvatoreCognetta ปีที่แล้ว +1

    Very interesting tutorial! Could you please share the configuration file (setting.json) of you vscode?

  • @RitikRaj-we2sc
    @RitikRaj-we2sc 5 หลายเดือนก่อน +1

    It was a gret tutorial. It really helper me a lot.
    But there is one issue I am facing that is, I am opening a model when user clicks on the task and there I am adding the title, but the thing is when i select the text in input box , it starts dragging the task.
    Can you please tell me how should I prevent this ?

    • @klitonbare
      @klitonbare  5 หลายเดือนก่อน

      Thank you. Have you added a distance activation behavior?

    • @RitikRaj-we2sc
      @RitikRaj-we2sc 5 หลายเดือนก่อน +1

      Thanks for the reply @@klitonbare
      yes I added this sensor:
      const sensors = useSensors(
      useSensor(PointerSensor, {
      activationConstraint: { distance: 10 },
      }),
      useSensor(TouchSensor, {
      activationConstraint: { delay: 200, tolerance: 5 },
      })
      );
      but still selecting the text in input causes the task to drag.

    • @klitonbare
      @klitonbare  5 หลายเดือนก่อน

      Try to add more distance

    • @RitikRaj-we2sc
      @RitikRaj-we2sc 5 หลายเดือนก่อน +1

      @@klitonbare okay so I tried this. I added a delay and even though it works, but it's not the right way I think. If I select the text inside the input and I cross that delay then again the same behaviour will arise.
      If somehow I could avoid the pointer events on the input box, then that might work.

    • @klitonbare
      @klitonbare  5 หลายเดือนก่อน

      There are various ways to handle this:
      1. Add a drag handler to allow drag events only on that element
      2. When you click on an input or something similar set your component in an "edit mode", and while this editMode === true you can disable the useDroppableHook or something like that.
      etc

  • @Fob.To.Fire.
    @Fob.To.Fire. ปีที่แล้ว +1

    I really like your video, just wondering if drag and drop actions can be fired by code or it has to be by user's mouse?

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Thank you. You mean using keyboard instead of mouse events?

    • @Fob.To.Fire.
      @Fob.To.Fire. ปีที่แล้ว

      @@klitonbare Thank you for your prompt response. Let me make an example to explain. Say I want to make a button on the outside of the whole kanban area, when this button is clicked, a kanban card can perform drag and drop animation by itself to move somewhere like next column. So this is what I mean "fired by code". Is it possible?

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      Instead of using drag and drop, you can simply change the columnId of the card to move it. You can also add an animation that shows the card moving from its original position to the new column.

  • @harshmalhotra2785
    @harshmalhotra2785 10 หลายเดือนก่อน +1

    Hi, I am getting this error while making column draggable - react-beautiful-dndDroppable setup issue [droppableId: "board"]:DroppableProvided > placeholder could not be found.Please be sure to add the {provided.placeholder} React Node as a child of your Droppable
    Can anyone please help me out of this error?

    • @klitonbare
      @klitonbare  9 หลายเดือนก่อน

      HI, i'm not using react-beautiful-dnd in this tutorial, how is possible that you have an error with that library? Did i miss something?

  • @КостянтинБорисенко-о5ф
    @КостянтинБорисенко-о5ф หลายเดือนก่อน +1

    Can you add options to add another user in one time ?

    • @klitonbare
      @klitonbare  27 วันที่ผ่านมา +1

      What do u mean? Add multiple users and boards?

    • @КостянтинБорисенко-о5ф
      @КостянтинБорисенко-о5ф 26 วันที่ผ่านมา

      @ so that you can use it as a full-fledged corporate application together with your team in real time like Jira

  • @girovagandoinsardegna
    @girovagandoinsardegna ปีที่แล้ว +1

    Thanks, Good video.

  • @theizaananwar
    @theizaananwar 6 หลายเดือนก่อน +1

    when dropping a task over an empty conatiner/column it wont work....?

    • @klitonbare
      @klitonbare  6 หลายเดือนก่อน

      It should work if i remember correctly because the column itself is a droppable container

    • @hairzabala659
      @hairzabala659 4 หลายเดือนก่อน

      @@klitonbare Hey mate excelent tutorial, however it does not work when moving to an empty container, any idea why?

  • @Sombo254
    @Sombo254 ปีที่แล้ว +1

    Working on it now

  • @minhquanbuiquoc5734
    @minhquanbuiquoc5734 ปีที่แล้ว +1

    Great content, but i found a bug that is when you try to drag and drop to the beginning of another column, it slips to the second one. Can you help me looking into it? Thanks a lot.

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Thank you. You are dragging a task over a column right?

    • @minhquanbuiquoc5734
      @minhquanbuiquoc5734 ปีที่แล้ว +1

      @@klitonbare Yes i try to drag a task to the top of another column and it got dragged to the second position not the top

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Can you record a quick gif that shows the bug? Because i've tried to reproduced it but i failed. Thank you

    • @minhquanbuiquoc5734
      @minhquanbuiquoc5734 ปีที่แล้ว +1

      @@klitonbare Can i send you an email?

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Sure

  • @piotrs448
    @piotrs448 ปีที่แล้ว +1

    What if I want to preserve order on page refresh?

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      You can persist columns and tasks on local Storage.

  • @Ziboo30
    @Ziboo30 ปีที่แล้ว +1

    Gold

  • @lsumail2189
    @lsumail2189 2 หลายเดือนก่อน

    how can i get the source code , do i need to join this channel?

    • @klitonbare
      @klitonbare  2 หลายเดือนก่อน

      Hi, source code is only for patreon supporters

    • @klitonbare
      @klitonbare  2 หลายเดือนก่อน

      But you can recreate it entirely by just following the video if u don't want to become a patreon supporter

  • @babyrainbow7766
    @babyrainbow7766 ปีที่แล้ว +2

    how can i call api in onDragEnd, if call api in onDragOver the server is too hard

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      OnDragOver is fired multiple times so is not a good candidate for api call. You can put your api call on onDragEnd or instead you can create a useEffect that triggers when tasks changes ( and columns if you want ) and inside this useEffect persist the new tasks ( all of them ). Another option is to create a ref with useRef hook and save the last changes you have made there ( using ref you are not triggering a re-render ) and onDragAnd you can just read data from the ref and use it on api call.

    • @babyrainbow7766
      @babyrainbow7766 ปีที่แล้ว +1

      @@klitonbare Could you please make an example, thanks

  • @haikaljs-q2w
    @haikaljs-q2w ปีที่แล้ว +1

    please show how to connect with db

  • @binhcoding3am148
    @binhcoding3am148 ปีที่แล้ว +1

    in onDragOver, you used arrayMove in the wrong way, in some cases it will work wrong, this project is quite buggy

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      What bug did u find? Thank you

  • @lambangwicakosno
    @lambangwicakosno ปีที่แล้ว +1

    please make connect with database

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      You want a full stack version of this? ( maybe with nextjs? )

  • @TobyKaparu
    @TobyKaparu ปีที่แล้ว

    When my tasks or boards don't have fixed size, the dragged element is very buggy.. Is there any way around it?

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Hi, having different sizes can lead to weird CSS transformations. Can you try to replace ( in your style ) CSS.transform with CSS.translate and viceversa?

  • @subratranjan151
    @subratranjan151 ปีที่แล้ว +1

    Hi Sir
    This is very good example you given for DND kit but could you please let me know
    if i have the below column and card item state in below format how do we implement it and get the column id like("32423fdfs2343242", "3242rw321321") to reorder by index using arrayMove
    useState({
    "32423fdfs2343242": {
    "name": "columne 1",
    "tasks": [
    {
    "id": 1,
    "title": "task one",
    "content": "new content"
    },
    {
    "id": 2,
    "title": "task two",
    "content": "new contnt one"
    }
    ]
    },
    "3242rw321321": {
    "name": "column 2",
    "tasks": [
    {
    "id": 1,
    "title": "task one",
    "content": "new content"
    },
    {
    "id": 2,
    "title": "task two",
    "content": " new content two"
    }
    ]
    }
    }
    )

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Hi, You can get the ids with Object.keys(YOUR STATE VARIABLE HERE )

    • @subratranjan151
      @subratranjan151 ปีที่แล้ว

      @@klitonbare yes I have already done that.
      I want to update the cards by the column I'd ut when I do drag and drop of item I am always getting card item id not the column I'd from active and over object in ondragend or onDragStart or onDragUpdate event. please help me as i dont understand when to drag the item drop the item to another column and update the state by the column id

    • @klitonbare
      @klitonbare  ปีที่แล้ว

      Can you write the code on discord? ( link in description ) so i can help you better

    • @subratranjan151
      @subratranjan151 10 หลายเดือนก่อน

      @@klitonbare
      I've implemented react-dnd-kit, and it's working fine for both vertical and horizontal auto-scrolling. However, when I have multiple columns (e.g., 4 columns per row, then the next 4 in the second row) and one column has more than 100 items, sometimes when dragging an item, the auto-scrolling gets stuck for a few milliseconds, causing lagging and not flexing properly. Could you please share a solution for this?"

  • @ngocduongofficial290
    @ngocduongofficial290 6 วันที่ผ่านมา +1

    can you share source code ?

    • @klitonbare
      @klitonbare  3 วันที่ผ่านมา

      Is for patreon supporters

  • @andrews4379
    @andrews4379 ปีที่แล้ว

    Have bugs in mobile version

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      In fact is not responsive. I focused more on the drag-and-drop features than on the responsiveness.

    • @klitonbare
      @klitonbare  ปีที่แล้ว +1

      Btw the dnd-kit library handle also touch gestures ( docs.dndkit.com/api-documentation/sensors/touch ). You have just to add the touch sensor to the sensors provided to DndContext and it will work.