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
10 ай бұрын
Glad it was helpful!
@klitonbare
10 ай бұрын
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
10 ай бұрын
Will do, thx! :)@@klitonbare
@keylorjimenez7891
19 күн бұрын
@@HP-ol2uxI need some help with DND kit will you help me?
@fullstackstudent
Жыл бұрын
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
Жыл бұрын
Thank you 😁😁
@christopherlawrenc_
5 ай бұрын
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
5 ай бұрын
Thank you! Check also the form builder video, i’m using dnd-kit there too! 👍
@christopherlawrenc_
5 ай бұрын
@@klitonbare Lol that is exactly what I'm building! I'll take a look.
@DanilaMinin
6 ай бұрын
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
6 ай бұрын
Thank you :)
@AmbreCaldin
8 ай бұрын
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
8 ай бұрын
Great to hear! Thank you!
@mohammedaminaimeur6892
3 ай бұрын
Best dnd-kit tutorial ever! Thanks for the effort.
@klitonbare
3 ай бұрын
Wow, thanks!
@vorche_
6 ай бұрын
Man watching you code makes it so simple
@klitonbare
6 ай бұрын
Thank you!
@juliamendes6617
9 ай бұрын
This tutorial is amazing. Your explanations are clear and it was easy to follow. Thank you so much for this!
@klitonbare
9 ай бұрын
Thank you!!!
@steevelsharonsalis6564
Жыл бұрын
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.
@klitonbare
Жыл бұрын
Thank you :)
@meherunnesa7838
Жыл бұрын
❤😢😅
@MrCommutateur
4 ай бұрын
Many Thanks!! This was much better than the official documentation!
@klitonbare
4 ай бұрын
Wow, thanks a lot!
@2kceltics
6 ай бұрын
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
4 ай бұрын
Thank you!. This was a briliant tutorial from beginning to the end.
@klitonbare
4 ай бұрын
Glad you enjoyed it!
@narendrakajla77
2 ай бұрын
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
2 ай бұрын
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 )
@extremes3605
9 ай бұрын
thank you so much this is a very clean and thorough explanation
@klitonbare
9 ай бұрын
Thank you!
@TheWhoIsTom
Жыл бұрын
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
Жыл бұрын
I’m happy you enjoyed it. Those are god tips. I usually work with vim keybindings, but I turned them off for the video.
@b1oodzy
8 ай бұрын
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
8 ай бұрын
Yes, you are right. Thank you
@Cardonfamily
8 ай бұрын
I found mine with the following - {(tasks.filter((task) => task.columnId === column.id)).length}
@bilalhaider1233
10 ай бұрын
man that was a pretty amazing functionality. Loved this project! Thanks
@klitonbare
10 ай бұрын
Glad you liked it!
@devsuthar6795
24 күн бұрын
Bro how easily you made me understand this thing. best tutorial for react DND. thank u 👍👍
@klitonbare
24 күн бұрын
Glad to hear that 👍👍👍
@miraclenerdkidchiki6249
Жыл бұрын
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 👌
@klitonbare
Жыл бұрын
Thank you!!
@Glissadist
9 ай бұрын
Great tutorial! Complex stuff for a newer coder but very well done!
@klitonbare
9 ай бұрын
Much appreciated!
@roshandalami
10 ай бұрын
I was looking for DnD feature for a while . and I found you . Great tutorial ❤❤❤
@klitonbare
10 ай бұрын
Awesome! Thank you!
@alexizhernandez8011
Жыл бұрын
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
Жыл бұрын
Thank you for pointing out :)!
@armaan5413
8 ай бұрын
Thank you for the tutorial. Really enjoyed it
@klitonbare
8 ай бұрын
Thank you!!!
@sahilverma_dev
3 ай бұрын
Thanks sir for such great content.
@klitonbare
3 ай бұрын
Thanks and welcome
@ggsingla
3 ай бұрын
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
2 ай бұрын
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 )
@muhammadfaizantariq7841
Жыл бұрын
Thanks for amazing tutorial on Kanban Board with React
@klitonbare
Жыл бұрын
Thank you!
@namejo7822
Жыл бұрын
i recently started learning React and I'm looking for tutorials to code along.. this one was soooo good, thx! just subscribed
@klitonbare
Жыл бұрын
Thank youuu :)
@osman3610
Ай бұрын
You're the best!! Appreciate for this tutorial, you save my day
@klitonbare
Ай бұрын
Glad to hear that!
@smritipradhan6921
9 ай бұрын
Amazing !! Thank you so much for the Video
@klitonbare
9 ай бұрын
My pleasure!
@CopperEngineerEs
11 ай бұрын
Just beautiful ❤❤❤❤
@klitonbare
11 ай бұрын
Thank you!
@migliorelli
10 ай бұрын
For those who are having the problem of tasks or containers of different sizes being stretched: instead of using CSS.Transform, use CSS.Translate
@WiolettaMiazga-ru8cx
6 ай бұрын
It's awesome, thank you so much ❤
@klitonbare
6 ай бұрын
Thank you!
@abdullahkhalid9885
Жыл бұрын
I loved your tutorial, it was amazing!
@klitonbare
Жыл бұрын
Thank you!!
@4surajgo
11 ай бұрын
A very great video learned something new Keep up the good work
@klitonbare
11 ай бұрын
Thank you!
@anasmalik3633
5 ай бұрын
wow. nice tutorial. Thanks a lot But one Question. I can't move tasks from one column to a newly created empty column..
@niteshprajapat7918
Жыл бұрын
Need more tutorials like these 🎉
@klitonbare
Жыл бұрын
Thank you
@0mEtAlx0
Жыл бұрын
Thanks a lot for sharing! Dndkit docs are gargabe, this is great, keep it up
@klitonbare
Жыл бұрын
Thank you :)
@vijaymaliktravels
Жыл бұрын
This is really helpful in getting started with @dnd-kit. One question: Why did you render DragOverlay in a portal?
@klitonbare
Жыл бұрын
Hi thank you. I was using portals to show that you have this option available.
@TalhaSeven
6 ай бұрын
very nice, thank you
@klitonbare
6 ай бұрын
Thank you too!
@anuvette
10 ай бұрын
this is so beautiful ahhh
@klitonbare
10 ай бұрын
Thank you!!
@gabeabeaaa
10 ай бұрын
amazing video!
@klitonbare
10 ай бұрын
Glad you think so!
@kevinarley6958
Жыл бұрын
Ey! You are incredible. I needed this content for apply a similar solution in my work. Thanks. I love you. jajaj ♥
@klitonbare
Жыл бұрын
Thank youu 😀
@WILLMARFERNANDOROMEROMARIN
9 ай бұрын
muy buen tutorial, me permitió aprender de principio hasta el final
@benixmaximus
11 ай бұрын
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
11 ай бұрын
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 )
@orlandoferazzani3639
5 ай бұрын
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
5 ай бұрын
Thank you! 🙏 In the future, I plan to update this video to include database persistence and other features. 🙂
@peachpiez
Жыл бұрын
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
Жыл бұрын
On new videos i will do that. Thank you for the feedback.
@rikiiki7114
Жыл бұрын
this really helps my learning process, thanks a lot sir
@klitonbare
Жыл бұрын
Happy to hear that 😃
@jaytalekar6184
10 ай бұрын
Extremely Helpful😀😃
@klitonbare
10 ай бұрын
Glad you think so!
@mohsenaslani170
8 ай бұрын
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
8 ай бұрын
Probably i forgot. At what minute you spot the error? ( so i can check) Thank you
@mohsenaslani170
8 ай бұрын
@@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
8 ай бұрын
@@mohsenaslani170 Ye exactly. Later on in the video ( i don't remember the minute tbh ) i'm updating the zero with task.length +1 :)
@stefanvasilica4810
Жыл бұрын
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
Жыл бұрын
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.
@ixo-p6917
7 ай бұрын
Hey man Thanks for the component + amazing tutorial Keep up the good work mate
@klitonbare
7 ай бұрын
Thanks, will do!
@Fob.To.Fire.
Жыл бұрын
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
Жыл бұрын
Thank you. You mean using keyboard instead of mouse events?
@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
Жыл бұрын
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.
@nurhamsah_tech
8 ай бұрын
thanks 💯💯
@klitonbare
8 ай бұрын
💪🏼
@AFTstorm
4 ай бұрын
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
3 ай бұрын
This should not happen. Are u using the DragOverlay correctly?
@FullStack_OverFlow
4 ай бұрын
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
3 ай бұрын
Thanks for the info!
@YuriyChamkoriyski
8 ай бұрын
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
8 ай бұрын
Thank you
@carlosmarioaraujo
Жыл бұрын
Amazing! Thank you!
@klitonbare
Жыл бұрын
Glad you liked :)
@MohamedElguarir
4 ай бұрын
Thanks man 🙏 I like the accent 😅🔥
@klitonbare
4 ай бұрын
Thanks! 😃
@Prince_515
Жыл бұрын
Nice job, keep the vids coming
@klitonbare
Жыл бұрын
Thank you so much
@Uncle.K.in2077
Жыл бұрын
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
Жыл бұрын
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.
@osamuaraya2898
10 ай бұрын
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
10 ай бұрын
Hi, after finishing the next video i will check this bug :) Thank you
@dragonwarrior7246
10 ай бұрын
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
10 ай бұрын
hi. Inside ondragEnd function
@SalvatoreCognetta
Жыл бұрын
Very interesting tutorial! Could you please share the configuration file (setting.json) of you vscode?
@huynhphatat3919
Жыл бұрын
I think you should update this app with local storage to store the data when you type or smt. (my personal opinion)
@klitonbare
Жыл бұрын
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
Жыл бұрын
@@klitonbare great, not me but all the followers are waiting your new video. see you soon on new video
@smritipradhan6921
9 ай бұрын
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
@Ziboo30
Жыл бұрын
Gold
@klitonbare
Жыл бұрын
Thank you 🤩
@Sombo254
Жыл бұрын
Working on it now
@lsumail2189
Күн бұрын
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
@minhquanbuiquoc5734
Жыл бұрын
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
Жыл бұрын
Thank you. You are dragging a task over a column right?
@minhquanbuiquoc5734
Жыл бұрын
@@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
Жыл бұрын
Can you record a quick gif that shows the bug? Because i've tried to reproduced it but i failed. Thank you
@minhquanbuiquoc5734
Жыл бұрын
@@klitonbare Can i send you an email?
@klitonbare
Жыл бұрын
Sure
@Yuri-h2o
Жыл бұрын
The backend, dove sono? ✨ Mille gracias por tut
@klitonbare
Жыл бұрын
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.
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
2 ай бұрын
Thank you. Have you added a distance activation behavior?
@RitikRaj-we2sc
2 ай бұрын
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
2 ай бұрын
Try to add more distance
@RitikRaj-we2sc
2 ай бұрын
@@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
2 ай бұрын
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
This GitHub project doesn’t exist. Can you share the code?
@theizaananwar
4 ай бұрын
when dropping a task over an empty conatiner/column it wont work....?
@klitonbare
3 ай бұрын
It should work if i remember correctly because the column itself is a droppable container
@hairzabala659
Ай бұрын
@@klitonbare Hey mate excelent tutorial, however it does not work when moving to an empty container, any idea why?
@girovagandoinsardegna
Жыл бұрын
Thanks, Good video.
@klitonbare
Жыл бұрын
Thank you 😀
@harshmalhotra2785
7 ай бұрын
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
7 ай бұрын
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?
@khalid_aziz.
10 ай бұрын
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
10 ай бұрын
Hi, "Uncaught Error: Maximum update depth exceeded." this means that somewhere you are updating state endlessly.
@khalid_aziz.
8 ай бұрын
@@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); }); } };
@jason.zubiate
11 ай бұрын
great video its just so hard to follow along when everything is on a new line lol.
@jason.zubiate
11 ай бұрын
16:28 is just a headache to look at
@klitonbare
11 ай бұрын
Sorry about that, i will handle that differently in next videos!
@piotrs448
Жыл бұрын
What if I want to preserve order on page refresh?
@klitonbare
Жыл бұрын
You can persist columns and tasks on local Storage.
@haikaljs-q2w
10 ай бұрын
please show how to connect with db
@binhcoding3am148
11 ай бұрын
in onDragOver, you used arrayMove in the wrong way, in some cases it will work wrong, this project is quite buggy
@klitonbare
11 ай бұрын
What bug did u find? Thank you
@azuma12
7 ай бұрын
Hi i am unable to move my tasks between columns help me out
@klitonbare
7 ай бұрын
Hi, what error do u have?
@azuma12
7 ай бұрын
@@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
7 ай бұрын
pls reply i need to make this for my project
@klitonbare
7 ай бұрын
@@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?
@babyrainbow7766
Жыл бұрын
how can i call api in onDragEnd, if call api in onDragOver the server is too hard
@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
Жыл бұрын
@@klitonbare Could you please make an example, thanks
@lsumail2189
5 күн бұрын
how can i get the source code , do i need to join this channel?
@klitonbare
4 күн бұрын
Hi, source code is only for patreon supporters
@klitonbare
4 күн бұрын
But you can recreate it entirely by just following the video if u don't want to become a patreon supporter
@TobyKaparu
10 ай бұрын
When my tasks or boards don't have fixed size, the dragged element is very buggy.. Is there any way around it?
@klitonbare
10 ай бұрын
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?
@lambangwicakosno
Жыл бұрын
please make connect with database
@klitonbare
Жыл бұрын
You want a full stack version of this? ( maybe with nextjs? )
@subratranjan151
Жыл бұрын
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
Жыл бұрын
Hi, You can get the ids with Object.keys(YOUR STATE VARIABLE HERE )
@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
Жыл бұрын
Can you write the code on discord? ( link in description ) so i can help you better
@subratranjan151
8 ай бұрын
@@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?"
@andrews4379
Жыл бұрын
Have bugs in mobile version
@klitonbare
Жыл бұрын
In fact is not responsive. I focused more on the drag-and-drop features than on the responsiveness.
@klitonbare
Жыл бұрын
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.
@arupde6320
Жыл бұрын
be regular
@Nomadev
5 ай бұрын
Nice fucking tutorial. The documentation of DND Kit isnt good.
@klitonbare
5 ай бұрын
Thank you
@MrHSkywalker
Жыл бұрын
firsttt
@shubhamsareliya6212
Жыл бұрын
Nice One @codewithkliton Got the video reference from @dailydotdev
@klitonbare
Жыл бұрын
Thank you
@jhoncruz2393
9 ай бұрын
I was looking for it for a long time, thank you. I worked it in Next 14 and it accepts a movement limit "Maximum update depth exceeded." Would you know why? Thanks again sir 🫡
Пікірлер: 217