Issue #1599Opened November 20, 2018by 00salmon0 reactions
inactive

[Bug] Drag and drop rendering improperly

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)

artf• November 21, 20180 reactions

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

00salmon• November 21, 20180 reactions

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

artf• November 21, 20180 reactions

Please update the live demo with cleaned JSON

Related Questions and Answers

Continue research with similar issue discussions.

Issue #4015

BUG: Drag and drop not working well in case of RTL

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v96 Reproducible demo link https://...

2 answersUpdated August 10, 2023

Issue #3939

BUG: Disabled drag and drop in preview

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? v95Reproducible demo link https://codesandbo...

3 answersUpdated August 10, 2023

Issue #4592

BUG: Textable Component becomes Noneditable when dropped in a Text Block

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 104.0.5112.102 Reproducible demo link http...

0 answersUpdated August 10, 2023

Issue #4006

Background color automatically changes to black

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://grap...

3 answersUpdated August 10, 2023

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders