Issue #1599💬 AnsweredOpened November 20, 2018by 00salmon0 reactions

Drag and drop rendering improperly

快速解答by artf

Seems like the issue is due to different empty "textnode"s you have in your JSON. How do you obtain that structure?

Read full answer below ↓

Question

Version 0.14.40

  1. Click "Continue"
  2. Select "You have successfully signed up!" header (sqh-header)
  3. Drag sqh-header block between "Give $10 and Get $10" and text below
  4. sqh-header appears visually above the Give $10 Header, but below the Give $10 Header in the layer manager
  5. Drag sqh-header beneath "Rewards Dashboard" back inside "form-component"
  6. sqh-header appears visually above "Rewards Dashboard", but below in the layer section

Couldn't reproduce this bug with the demo, and I can't seem to figure out what the issue is. Tried multiple versions of grapesjs and the bug appears each time.

Tested on https://jsfiddle.net/00salmon/ocbxqm91/ using Chrome

Answers (3)

artfNovember 21, 2018

Seems like the issue is due to different empty "textnode"s you have in your JSON. How do you obtain that structure?

00salmonNovember 21, 2018

Hey @artf,

Thanks for pointing that out. The JSON came from an internal example with more components and the missing bits must've been converted to empty textnodes.

I've removed the empty textnodes in the jsfiddle, but still seem to be getting the issue with the "sqh-header" landing in the wrong spot. Any other clues?

Cheers

artfNovember 21, 2018

Please update the live demo with cleaned JSON

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.