I'm trying to use react-sortable-hoc
with bulma tables, so the SortableItem
would be a tr
. The problem is this: For a table row to obtain styling in bulma it needs to have some parent table
-element with the class table
. When trying to move the tr
, because it's placed just before the end of the body
-element, it doesn't have the table
-parent anymore, all styling is lost and the row collapses.
How would I solve this? I have seen other drag-and-drop libraries (not react-specific) solving this kind of problem with essentially screenshotting the element and moving an img
instead... it would already help me if I could manipulate how exactly the tr
is appended to the body. Is there another lightweight dnd-react-library that could do this if I can't work it out with react-sortable-hoc
? Thanks in advance for any help.
I was able to solve this in the end using combination of the provided events (updateBeforeSortStart
and onSortStart
).
The approach goes like this:
updateBeforeStart
, save the styles for all of its children using window.getComputedStyle
document.querySelector(body > tr:last-of-type)
, which is a bit ugly and apply the style to all of its childrenThis was outlined here and was slightly modified by me.