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
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.
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
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.
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
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 !
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.
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. 😃
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
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.
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.
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!
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
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
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 )
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.
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)
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 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.
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
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!
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 )
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.
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.
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.
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.
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?
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
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.
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.
@@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
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
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 ?
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 ?
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 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.
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
@@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?
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.
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?
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.
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.
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?
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 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 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?"
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.
Source Code ( for patreon sponsors ⭐): dub.sh/tYw2ph6
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
Glad it was helpful!
Check out also the last video: "Form builder": i use dnd-kit there in a different way compared to the kanban board video :)
Will do, thx! :)@@klitonbare
@@HP-ol2uxI need some help with DND kit will you help me?
Many Thanks!! This was much better than the official documentation!
Wow, thanks a lot!
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.
Thank you 😁😁
This is exactly what I was looking for. Very well done. I appreciate you taking the time to explain dnd-kit in this way!
Thank you! Check also the form builder video, i’m using dnd-kit there too! 👍
@@klitonbare Lol that is exactly what I'm building! I'll take a look.
Excellent tutorial! Thanx! 🤩
Thanks a lot!!
Best dnd-kit tutorial ever! Thanks for the effort.
Wow, thanks!
Best dnd-kit tutorial ever! Thanks for that
Wow, thanks!
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
Great to hear! Thank you!
Man watching you code makes it so simple
Thank you!
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.
Thank you :)
❤😢😅
This tutorial is amazing. Your explanations are clear and it was easy to follow. Thank you so much for this!
Thank you!!!
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
Thank you :)
thank you so much this is a very clean and thorough explanation
Thank you!
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 !
Thank you!. This was a briliant tutorial from beginning to the end.
Glad you enjoyed it!
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.
Thank you for pointing out :)!
man that was a pretty amazing functionality. Loved this project! Thanks
Glad you liked it!
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. 😃
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 )
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 👌
Thank you!!
I was looking for DnD feature for a while . and I found you . Great tutorial ❤❤❤
Awesome! Thank you!
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
Happy to hear that! 😀😀😀
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.
I’m happy you enjoyed it. Those are god tips. I usually work with vim keybindings, but I turned them off for the video.
Thank you for the tutorial. Really enjoyed it
Thank you!!!
Nice work, love the pacing of the video :)
Thanks a lot!
Thanks for amazing tutorial on Kanban Board with React
Thank you!
Great tutorial! Complex stuff for a newer coder but very well done!
Much appreciated!
You got 20k subscribers with just 5 videos bro. That's a huge achievement.
Thanks a lot! You're right!
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.
Yes, you are right. Thank you
I found mine with the following -
{(tasks.filter((task) => task.columnId === column.id)).length}
We need more projects bro!!! Don’t stop
Thanks!
i recently started learning React and I'm looking for tutorials to code along.. this one was soooo good, thx! just subscribed
Thank youuu :)
Thanks sir for such great content.
Thanks and welcome
Need more tutorials like these 🎉
Thank you
A very great video learned something new
Keep up the good work
Thank you!
This is super cool bro. I appreciate.
Unfortunately, I can't access dnd-kit documentation and this has been helpful so far.
Glad it helped
Thanks a lot for sharing! Dndkit docs are gargabe, this is great, keep it up
Thank you :)
I loved your tutorial, it was amazing!
Thank you!!
Amazing !!
Thank you so much for the Video
My pleasure!
Excellent tutorial! Thank you.
Glad you enjoyed it!
You're the best!! Appreciate for this tutorial, you save my day
Glad to hear that!
Just beautiful ❤❤❤❤
Thank you!
It's awesome, thank you so much ❤
Thank you!
Ey! You are incredible. I needed this content for apply a similar solution in my work. Thanks. I love you. jajaj ♥
Thank youu 😀
this really helps my learning process, thanks a lot sir
Happy to hear that 😃
Bro how easily you made me understand this thing. best tutorial for react DND. thank u 👍👍
Glad to hear that 👍👍👍
Hey man
Thanks for the component + amazing tutorial
Keep up the good work mate
Thanks, will do!
this is so beautiful ahhh
Thank you!!
Half Way completed. Amazing tutorial.
Edit: Completed. Now introducing Redux state and API calls
Awesome 🤩
For those who are having the problem of tasks or containers of different sizes being stretched:
instead of using CSS.Transform, use CSS.Translate
amazing video!
Glad you think so!
Extremely Helpful😀😃
Glad you think so!
Well explained !!
Thanks!
muy buen tutorial, me permitió aprender de principio hasta el final
Nice job, keep the vids coming
Thank you so much
very nice, thank you
Thank you too!
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!
On new videos i will do that. Thank you for the feedback.
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
Thank you! 🙏 In the future, I plan to update this video to include database persistence and other features. 🙂
Thanks man 🙏
I like the accent 😅🔥
Thanks! 😃
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
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 )
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.
Hi, can you join the discord and share your code? so i can try to help you :)
thanks 💯💯
💪🏼
Amazing! Thank you!
Glad you liked :)
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)
This should not happen. Are u using the DragOverlay correctly?
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?
Probably i forgot. At what minute you spot the error? ( so i can check) Thank you
@@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.
@@mohsenaslani170 Ye exactly. Later on in the video ( i don't remember the minute tbh ) i'm updating the zero with task.length +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
Hi, sorry for late reply. Have you seen my FormBuilder video? In that video i'm doing exactly what you have described :)
wow. nice tutorial. Thanks a lot
But one Question. I can't move tasks from one column to a newly created empty column..
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!
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 )
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.
Thank you
This is really helpful in getting started with @dnd-kit.
One question: Why did you render DragOverlay in a portal?
Hi thank you. I was using portals to show that you have this option available.
The backend, dove sono? ✨ Mille gracias por tut
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.
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.
Thanks for the info!
@@klitonbare Hi! How did you solve this problem?
I think you should update this app with local storage to store the data when you type or smt. (my personal opinion)
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.
@@klitonbare great, not me but all the followers are waiting your new video. see you soon on new video
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
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.
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?
Hi, after finishing the next video i will check this bug :) Thank you
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
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.
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.
Hi i am unable to move my tasks between columns help me out
Hi, what error do u have?
@@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
pls reply i need to make this for my project
@@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?
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
hi. Inside ondragEnd function
great video its just so hard to follow along when everything is on a new line lol.
16:28 is just a headache to look at
Sorry about that, i will handle that differently in next videos!
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 ?
Hi, "Uncaught Error: Maximum update depth exceeded." this means that somewhere you are updating state endlessly.
@@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);
});
}
};
Very interesting tutorial! Could you please share the configuration file (setting.json) of you vscode?
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 ?
Thank you. Have you added a distance activation behavior?
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.
Try to add more distance
@@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.
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
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?
Thank you. You mean using keyboard instead of mouse events?
@@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?
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.
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?
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?
Can you add options to add another user in one time ?
What do u mean? Add multiple users and boards?
@ so that you can use it as a full-fledged corporate application together with your team in real time like Jira
Thanks, Good video.
Thank you 😀
when dropping a task over an empty conatiner/column it wont work....?
It should work if i remember correctly because the column itself is a droppable container
@@klitonbare Hey mate excelent tutorial, however it does not work when moving to an empty container, any idea why?
Working on it now
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.
Thank you. You are dragging a task over a column right?
@@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
Can you record a quick gif that shows the bug? Because i've tried to reproduced it but i failed. Thank you
@@klitonbare Can i send you an email?
Sure
What if I want to preserve order on page refresh?
You can persist columns and tasks on local Storage.
Gold
Thank you 🤩
how can i get the source code , do i need to join this channel?
Hi, source code is only for patreon supporters
But you can recreate it entirely by just following the video if u don't want to become a patreon supporter
how can i call api in onDragEnd, if call api in onDragOver the server is too hard
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.
@@klitonbare Could you please make an example, thanks
please show how to connect with db
in onDragOver, you used arrayMove in the wrong way, in some cases it will work wrong, this project is quite buggy
What bug did u find? Thank you
please make connect with database
You want a full stack version of this? ( maybe with nextjs? )
When my tasks or boards don't have fixed size, the dragged element is very buggy.. Is there any way around it?
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?
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"
}
]
}
}
)
Hi, You can get the ids with Object.keys(YOUR STATE VARIABLE HERE )
@@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
Can you write the code on discord? ( link in description ) so i can help you better
@@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?"
can you share source code ?
Is for patreon supporters
Have bugs in mobile version
In fact is not responsive. I focused more on the drag-and-drop features than on the responsiveness.
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.