Best Architectural Design For Drag n Drops.
Parent -
1. I have an state that contains an array of items.
2. I mapped my items to a 2d grid where each array is a row and each item is the index.
3. I then update the array state, so each array of items has an updated field for its grid position and made a seperate state for the stylesheet.
Child Component -
Takes in style state.
Contains all the logic with onDrag, onDragStart, onDragEnd
onDrag will fire a function from the parent to update the style so the child component can rerender..
Function that fires when dragging will end up fireing step 2 and 3.
There has to be a better way for me to layout this logic, because its so convoluted.
Also the grid is a grid that is 3 wide and dynamically tall.
The items in the grid can be 2x2, 1x2,1x1.
0 Replies