@CodeBlessYou Thank you for this amazing tutorial. I have encountered a bug in this application. Suppose I dragged all the tasks in any of the sections. Lets say I dragged all the tasks into doing section. Now at this point I cannot drag the tasks into another section. In short when the section is empty we cannot drop the task to that section. I hope you would address this and help solve this bug asap. Thanks a lot
You can drop task into empty column. But it is on the very top. If you slowly drag your card, you will get that. You can put condition to make it bigger.
First i used this: const updatedTasks = tasks.filter((task, index) => { index !== activeCard; }); and then i dragged a card but everything else got erased. But when i removed curly braces and ; in the arrow function and it worked fine. Can u explain why
because in callback function, we have to return condition. And if you add curly brackets then you have to do return index !== activeCard; So that's why in short we can directly write index !== activeCard without curly brackets.
can we implement below as well if yes then please make video or give some suggestion after drag and drop make api call save the changed data on server fetch it and show it ui using redux same again items are draged and droped in other compnent make api call save the changed data on server fetch it and show it ui using redux ..... goes on as per user decide
💙Register for FREE Git and Github Course - forms.gle/U4cnzMX1EkWPHdX89
Excellent! neat and clean. No unnecessary complex info. Just enough and perfect to the point. Many thanks. 👍👍
❤❤❤
This is a gem. I was not expecting it to be this good.
Thank you so much❤❤❤
Thanks. I can finish my feature by watching your clip. :D I hope to see more of your great lessons.
Sure❤❤❤
Beautifully explained ❤ Will surely use this in my future projects 🙌🏻
Glad to hear that. Thank you so much❤❤❤
This was Gold❤
Thank you so much❤❤❤
Thank you so much for this !!! good teach, good explain, good video 😇🙏
❤❤❤
Perfect! no, just great! Thank you!
Thank you so much❤❤❤
Best explanation
Thank you so much❤❤❤
Great job!
❤❤❤q
Nice, which tool do you use for creating presentations?
It is not presentation, It is animation of After Effects (Adobe)
you saved my life
❤❤❤
Excellent . thanks a lot
Thanks for watching😀❤❤
Superb on point!
❤❤❤
Ima use this
❤❤❤
Bro You explanation clearly and good
Thank you so much. Glad to hear that❤❤❤
Just smooth. Amazong.
Thank you so much❤❤❤
very good video thank you very much!
❤❤❤
Can I use this for react-native?
@CodeBlessYou Thank you for this amazing tutorial. I have encountered a bug in this application. Suppose I dragged all the tasks in any of the sections. Lets say I dragged all the tasks into doing section. Now at this point I cannot drag the tasks into another section. In short when the section is empty we cannot drop the task to that section. I hope you would address this and help solve this bug asap. Thanks a lot
You can drop task into empty column. But it is on the very top. If you slowly drag your card, you will get that. You can put condition to make it bigger.
@@CodeBlessYou thanks a lot
First i used this:
const updatedTasks = tasks.filter((task, index) => {
index !== activeCard;
});
and then i dragged a card but everything else got erased. But when i removed curly braces and ; in the arrow function and it worked fine. Can u explain why
because in callback function, we have to return condition. And if you add curly brackets then you have to do return index !== activeCard; So that's why in short we can directly write index !== activeCard without curly brackets.
You can use return (index!=activeCard);
yeah, had the same issue
you helped me, thanks !
nice tutorial, waiting new videos
❤❤❤
Do you have a usereducer version?
No this is basic project
I thought drag on drop feature is only possible with the library. Thank you for the good content.
❤❤❤
as always a great job! how to implement drag and drop for mobiles?
You can use library for that
I followed your code and couldn't get drag to work on an empty column. (aka drag to an empty column)
Check where you are getting drop here area in your empty column. And style according to that❤❤❤
did you fix this issue? if yes then how!!
@@CodeBlessYou i did not get it. can you explain how can we do that?
@@krishparmar7917 You have to drag that box to the very top of the empty column. Then it works
@@CodeBlessYou now it is working 🎉
Hey man, is there any way to make the opacity of the dragging component 100% , I'm trying it still not getting full opacity!!
I think no. We can't get full opacity
can we implement below as well if yes then please make video or give some suggestion
after drag and drop make api call save the changed data on server fetch it and show it ui using redux
same again items are draged and droped in other compnent make api call save the changed data on server fetch it and show it ui using redux ..... goes on as per user decide
These are two different topics. If you want to call api after dropping the card then call the api in that dropped function :)
conditiooooon | aaaaand teeekalook
😅😅😅
How can it be nested?
I don't understand your question. Can you explain that?
add "Feature" in your title
❤❤❤
import React, { useState } from "react";
const DropArea = () => {
const [showDropArea, setShowDropArea] = useState(false);
return (
setShowDropArea(true)}
onDragLeave={() => setShowDropArea(false)}
>
);
};
export default DropArea;
onDragEnter is not capturing
check it's CSS is working or not. Because name is different drop_area and hide_drop.
i already submit the form.. please send me the source code ! im begging you, or i will get fired !
It is already available in the Resources folder. Here or on my Udemy Course.