BUG: Layer panel: drag and drop makes items disappear (firefox and chrome)

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Firefox 137.0 and Chrome 136.0.7103.92

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

How to reproduce the bug?

1. Open the official demo https://grapesjs.com/demo.html
2. To reproduce the exact same structure, paste this JSON in localStorage > gjsProject:

{"assets":[],"styles":[{"selectors":["#ixix"],"style":{"padding":"10px"}},{"selectors":["#ilfp"],"style":{"background-color":"#e7e7e7","padding":"20px"}},{"selectors":["#ivgby"],"style":{"padding":"10px"}},{"selectors":["menu"],"style":{"display":"flex"}},{"selectors":["nav__burger"],"style":{"display":"none"}},{"selectors":["nav_check"],"style":{"display":"none"}},{"selectors":["#ilpnl"],"style":{"padding":"10px"}},{"selectors":["nav"],"style":{"display":"flex","justify-content":"space-between"}},{"selectors":["nav__burger"],"style":{"display":"block"},"mediaText":"(max-width: 992px)","atRuleType":"media"},{"selectors":["menu"],"style":{"background-color":"#e7e7e7","display":"none","flex-direction":"column","padding":"40px","position":"absolute","right":"0px","top":"80px"},"mediaText":"(max-width: 992px)","atRuleType":"media"},{"selectors":[],"selectorsAdd":".nav_check + .menu","style":{"display":"flex"},"mediaText":"(max-width: 992px)","atRuleType":"media","atRule":"media"}],"pages":[{"frames":[{"component":{"type":"wrapper","stylable":["background","background-color","background-image","background-repeat","background-attachment","background-position","background-size"],"attributes":{"id":"i9x1"},"components":[{"tagName":"NAV","type":"container","classes":["nav"],"attributes":{"id":"ilfp"},"components":[{"type":"checkbox","void":true,"classes":["nav_check"],"attributes":{"type":"checkbox","id":"check"},"selector":{"mainSelector":{"pseudoClass":null,"selectors":[{"active":true,"type":"id","value":"check"},{"active":true,"type":"class","value":"nav_check"}]}}},{"type":"text","attributes":{"id":"ilpnl"},"components":[{"type":"textnode","content":"Logo","attributes":{"id":"itilh"}}],"custom-name":"Logo"},{"type":"container","classes":["menu"],"attributes":{"id":"i9568"},"components":[{"type":"text","classes":["item"],"attributes":{"id":"ixix"},"components":[{"type":"textnode","content":"Afriaca","attributes":{"id":"ihp2j"}}],"custom-name":"Items","id-plugin-data-source":"ixix-5417","privateStates":[{"expression":[{"dataSourceId":"ds-1","fieldId":"continents","kind":"list","label":"continents","options":{"filter":"{}"},"previewIndex":0,"propType":"field","type":"property","typeIds":["Continent"]}],"id":"__data"},{"expression":[{"componentId":"ixix-5417","exposed":false,"forceKind":"object","label":"Loop data (Continent)","previewIndex":0,"storedStateId":"__data","type":"state"},{"dataSourceId":"ds-1","fieldId":"name","kind":"scalar","label":"name","options":{},"previewIndex":0,"propType":"field","type":"property","typeIds":["String"]}],"id":"innerHTML"}],"selector":{"mainSelector":{"pseudoClass":null,"selectors":[{"active":true,"type":"id","value":"ixix"},{"active":true,"type":"class","value":"item"}]}}}],"custom-name":"Menu","selector":{"atRule":"@media (max-width: 992px)","mainSelector":{"pseudoClass":null,"selectors":[{"active":false,"type":"id","value":"i9568"},{"active":true,"type":"class","value":"menu"}]},"operator":{"displayName":"adjacent to","hasParam":false,"helpLink":"https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator","isCombinator":true,"sentencePre":"When it is","stringRepresentation":" + ","type":"+"},"relatedSelector":{"selectors":[{"active":true,"type":"class","value":"nav_check"}]}}},{"tagName":"LABEL","type":"text","classes":["nav__burger"],"attributes":{"for":"check","id":"ivgby"},"components":[{"type":"textnode","content":"☰","attributes":{"id":"iwbgb"}}],"custom-name":"Button","originalTagName":"div","selector":{"mainSelector":{"pseudoClass":null,"selectors":[{"active":true,"type":"id","value":"ivgby"},{"active":true,"type":"class","value":"nav__burger"}]}}}],"custom-name":"Nav","selector":{"mainSelector":{"pseudoClass":null,"selectors":[{"active":false,"type":"id","value":"ilfp"},{"active":true,"type":"class","value":"nav"}]}}}],"head":{"type":"head","attributes":{"id":"iz3t-2"}},"docEl":{"tagName":"html","attributes":{"id":"iaea-2"}},"COMPONENT_NAME_PREFIX":"","publicStates":[]},"id":"hqYccTexwziqC7Cq"}],"id":"ngEtsfeqULJzmyUR"}],"symbols":[],"settings":{"head":""},"fonts":[],"publication":{},"pagesFolder":"pages"}

3. Open the Layers panel
4. Drag the layer named "Checkbox" and drop it below "Logo"
5. Observe the canvas and the layers list

<img width="1598" height="999" alt="Image" src="https://github.com/user-attachments/assets/770fd76f-2329-4c63-a56f-78fabb30665e" />

What is the expected behavior?

The dragged layer moves to the new position

What is the current behavior?

• The dragged layer stays in its original position
• The component "Button" disappears from the canvas and from the layers

Code of Conduct

• I agree to follow this project's Code of Conduct