Repository navigation
avoid shadow DOM element getting re-appended when dragging #2951
Description
All my gridstack itens are deep down in the shadow DOM, when dragging I've noticed that my elements gets re-appended to the DOM which in turn makes my elements to make new api calls, I wonder if there's an way for Gridstack to look inside shadow DOM.
This is the place im referring to https://github.com/gridstack/gridstack.js/blob/master/src/dd-draggable.ts#L302
Activity
[-][Question] Is there a way to avoid element re-rendering when dragging?[/-][+][Question] Is there a way to avoid element re-appending to the DOM when dragging?[/+]adumesny commentedon Feb 18, 2025
would be good if you can provide a simple example as I don't use shadowDOM to debug/fix it. that said the
document.body.contains()probbaly doesn't need to get called in the first place unless you useclone()and require the function option to deal with it yourself...[-][Question] Is there a way to avoid element re-appending to the DOM when dragging?[/-][+]avoid shadow DOM element getting re-appended when dragging[/+]wellavelino commentedon Feb 19, 2025
hey @adumesny here is an working example, https://jsfiddle.net/L8z5vbnt/.
It calls https://github.com/gridstack/gridstack.js/blob/master/src/dd-draggable.ts#L302 (in a different line), we are using gridstack 5 at the moment, planning to upgrade to latest soon, Ive also checked on latest and the behaviour is the same.
Is it something that would be nice to have as support?
wellavelino commentedon Feb 20, 2025
@adumesny when you confirm it, I can actually work on it and put a PR to also look into the shadowDOM, I guess performance will also be needed to be taken into consideration, as probably requires transversing all nodes
adumesny commentedon Feb 20, 2025
no I can probably just check if helper has a parent, and possibly assume only
'clone'needs to insert it anyway and rely on custom callback to do do the insert (possible breaking change, but unlikely).In your example do you have a custom
GridStackOptions.draggable.helper?setupDragIn()is the only place typically used - do you have shadow DOM for side panel as well ?wellavelino commentedon Feb 21, 2025
Ok, no prob
no, we don't have a custom
GridStackOptions.draggable.helperwe only listen to grid.on('change') as we need to handle some calls, our elements are all inside shadowDOM. That example in jsfiddle is as close as it gets to what we have.shadow DOM drag re-append fix
adumesny commentedon Feb 25, 2025
fixed in next release! that example made it simple to test/fix...
don't forget to donate if you find this lib useful.
wellavelino commentedon Feb 25, 2025
@adumesny really appreciate it, i will look at what can be done about it!