Issue #2372Opened November 4, 2019by emilsedgh3 reactions

Dragging from toolbar can be off (dragMode)

Question

Here is a working demo of the issue

Steps to reproduce:

  1. Select a component
  2. Try dragging it from the toolbar

You can see that immediately the component jumps to the left. Although it works fine if you try dragging the component by itself (and not using toolbar)

This only happens if Grapesjs is loaded from a with margin and doesn't start from x:0

The reason it happens is this:

In both cases of dragging from toolbar or component itself, the tlb-move command is called. tlb-move accepts an event argument and the positioning of the element is calculated using event.clientX.

When you drag the component, sine the component is inside the iframe, it's clientX is relevant to the document and all goes fine.

But the toolbar button doesn't live on the canvas/iframe. Therefore, an event originating from ToolbarButtonView is relevant to the page, not to the canvas.

Here is a visual description:

Screenshot_20191104_023411

The ideal solution would be to calculate clientX and clientY of ToolbarIconView relative to the canvas before passing them to tlb-move command.

If you would accept such patch, I can get started on one.

Answers (3)

emilsedghNovember 4, 20192 reactions

Oh, I tried to find it before reporting but I couldn't. Thanks. I'll close this one then.

pouyamiralayiNovember 4, 20191 reactions

@emilsedgh there is an open discussion about this here

alemencionesJanuary 21, 20200 reactions

this's fixed in the last release right?

I need a solution when i drag outside of iframe in mobile devices

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.