I have a React app where I render an array of items in a grid that users can resize and re-arrange. On dragStart I save grid items and the slots (styles) to a data store. I offer the user a Reset button which should restore the original layout on page load. To accomplish this reset functionality, I do the following:
On dragStart
Retrieve all grid item elements via document.querySelectorAll()
Save this to a state variable
Retrieve the inline style for each element via elenent.attributes.style.value
Save this to a state variable
In the Reset function
Remove all the grid items via the .remove([item]) method
Retrieve the saved grid elements
For each saved grid element, I add it to the grid via the .add([element]) method
I call the .synchronize() method
NOTE: I save the styles above to account for saved layouts that can be loaded -- I also have a Save layout function
So the reset works and I'm able to restore the original layout on page load, whether it's the default layout or a saved layout that was stored. The problem is I replace the grid items with the ones that were saved previously, I am not able to drag the items to change their positions within the grid. I get the following error instead:
TypeError: Cannot read properties of undefined (reading 'eventController')
Hello,
I have a React app where I render an array of items in a grid that users can resize and re-arrange. On dragStart I save grid items and the slots (styles) to a data store. I offer the user a Reset button which should restore the original layout on page load. To accomplish this reset functionality, I do the following:
On dragStart
document.querySelectorAll()elenent.attributes.style.valueIn the Reset function
.remove([item])method.add([element])method.synchronize()methodNOTE: I save the styles above to account for saved layouts that can be loaded -- I also have a Save layout function
So the reset works and I'm able to restore the original layout on page load, whether it's the default layout or a saved layout that was stored. The problem is I replace the grid items with the ones that were saved previously, I am not able to drag the items to change their positions within the grid. I get the following error instead:
TypeError: Cannot read properties of undefined (reading 'eventController')Am I not doing this correctly? What's missing?