Drag and Drop in React (Complete Tutorial)

[@edward-vonschondorf-dev]

Perfect timing, will try to use this on my next project!

[@tomasburian6550]

Thank you for using TS in your tutorials. You's the best!

[@nouarchami9007]

thanks from Algeria so lelpful....

[@MadCreatorsAnuj]

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

[@DaoPVT]

nice tutorial, thank youuu 💯

[@beodan9219]

Very helpful, drag-drop become more easy

[@oussamaayadi5936]

Thank you. I have a question is there is any way to drag and drop in middle of elements?

[@golden7877]

Needed this one a lot thank you so much.

[@euuNeguinho]

Great content, the Brazilian thanks you

[@kamyarkamali7685]

you are the best bro

[@Deus-lo-Vuilt]

Thanks bro ❤

[@Fam-m4i]

If map returns a new array, why do you need to use callback in setState?

[@SaiponathGames]

Will this work for react native as well?

[@srkuleo]

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.

[@vijaychapagain646]

how to do for nested array that can go to root element or to other element meaning (anywhere)

[@akoladebode-ajayi327]

Thanks sir

[@ptolemyhenson6838]

How do you maintain order between elements?

[@spacey6960]

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.

[@harsh_g2543]

@@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 ?

[@spacey6960]

@@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.

[@immityaaa]

Nice❤

[@swapnilkatiyar8927]

Wow,

[@codeinspector]

killer

[@irfansaeedkhan7242]

niceeee