Can you please share a tutorial with grid layout, i need it in my project. currently, what you showed it is between columns. I want that the item can be placed freely and there is a single array. Displayed in flex direction row, can someone help me here??. I will be really grateful.
RUclips literally doesn't have a tutorial that would check both rows and columns. I tried with your tutorial today, but it doesn't seems to address this challenge. Would it be possible to create such? Thank you in advance!
Thank you for your effort. I am wondering how come all demos on the DNDKit website the 'drop' is animated, but your is not at all, it just renders on the new place without any interpolation? Is this because of tailwind?
Its an array of objects that gets mapped and filtered over. Map filter are sequential from first to last, so theres nothing that could change the order, so the order of the tasks gets preserved.
@@spacey6960 "Map filter are sequential from first to last" i am getting it maintains columns (todo progress and done) but how it is maintaining rows ?
@@harsh_g2543 the only separation of items into columns is a column id field in every object, so columns dont actually exist as far as the data in the array is aware. It is not a matrix of elements, just an array of elements. Suppose the original order of items in the array. When a card moves from a column to another, a new object is being created in its place in the array, with all fields equal to the original except the column id. So if item1 was placed before item2 in the array, the new object item3 that has item1's contents and a modified column id will also be before item2 in the array. So moving an item from column to column doesnt change the order, just the column id field in the objects. To split items into columns, you always go from first to last and filter elements by their column id. Since item3 replaced item1, and item1 was before item2, that means item3 is before item2. This means item3 will be filtered before item2. Which means that if item3 and item2 are in the same column, item3 will always be ahead of item2. Moving items into another column doesnt change the order. Splitting the array into columns doesnt change the order. That means there is no reason why cards would change their order.
Isn't dnd-kit not maintained anymore? I am sure I've read somewhere that original creator stopped maintaining it or rather is not updating it, so in the future some APIs might not work.
![Multiple List Drag and Drop in React [Easiest Way]](http://i.ytimg.com/vi/CJycVlSuaPg/mqdefault.jpg)
Perfect timing, will try to use this on my next project!
simple and efficient sample to understand drag and drop.
Thanks.
Thank you for using TS in your tutorials. You's the best!
I wished i saw this earlier.
Great video, Bro
Thanks a lot for making it easier, and I'm gonna subscribe your channel for future updates🙌🏻
Thank you so much brother.
Needed this one a lot thank you so much.
nice tutorial, thank youuu 💯
Very helpful, drag-drop become more easy
you are the best bro
Thank you. I have a question is there is any way to drag and drop in middle of elements?
Can you please make a tutorial on the template builder in react js, for which we want nested drag and drop like container inside container
Great content, the Brazilian thanks you
Can you please share a tutorial with grid layout, i need it in my project. currently, what you showed it is between columns. I want that the item can be placed freely and there is a single array. Displayed in flex direction row, can someone help me here??. I will be really grateful.
Same in my case, actually working on a grid layout now and it DnD in the grid. Hopefully, we can get this 🙂
RUclips literally doesn't have a tutorial that would check both rows and columns. I tried with your tutorial today, but it doesn't seems to address this challenge.
Would it be possible to create such? Thank you in advance!
Thank you for your effort. I am wondering how come all demos on the DNDKit website the 'drop' is animated, but your is not at all, it just renders on the new place without any interpolation? Is this because of tailwind?
Oh, sorry, I figured it out, it requires transition for the transform to work, unrelated to tailwind.
thanks from Algeria so lelpful....
Thanks bro ❤
how to do for nested array that can go to root element or to other element meaning
(anywhere)
Nice❤
If map returns a new array, why do you need to use callback in setState?
How do you maintain order between elements?
Its an array of objects that gets mapped and filtered over. Map filter are sequential from first to last, so theres nothing that could change the order, so the order of the tasks gets preserved.
@@spacey6960 "Map filter are sequential from first to last" i am getting it maintains columns (todo progress and done) but how it is maintaining rows ?
@@harsh_g2543 the only separation of items into columns is a column id field in every object, so columns dont actually exist as far as the data in the array is aware. It is not a matrix of elements, just an array of elements.
Suppose the original order of items in the array. When a card moves from a column to another, a new object is being created in its place in the array, with all fields equal to the original except the column id. So if item1 was placed before item2 in the array, the new object item3 that has item1's contents and a modified column id will also be before item2 in the array. So moving an item from column to column doesnt change the order, just the column id field in the objects.
To split items into columns, you always go from first to last and filter elements by their column id. Since item3 replaced item1, and item1 was before item2, that means item3 is before item2. This means item3 will be filtered before item2. Which means that if item3 and item2 are in the same column, item3 will always be ahead of item2.
Moving items into another column doesnt change the order. Splitting the array into columns doesnt change the order. That means there is no reason why cards would change their order.
Isn't dnd-kit not maintained anymore? I am sure I've read somewhere that original creator stopped maintaining it or rather is not updating it, so in the future some APIs might not work.
Thanks sir
Will this work for react native as well?
❤
killer
Wow,
niceeee