Issue #850Opened February 8, 2018by austinbiggs0 reactions

[Question]: Component:Moved Event

Question

What I'm trying to accomplish: I have a piece of code I need to run when a component is "dropped". I put "dropped" in quotes, because it needs to fire when the tlb-move ends.

So as a user, if I click the Move icon in the toolbar, when I finishing moving the component I need my code to fire. I've tried quite a few events with no success: stop:tlb-move, change:canvasOffset, focus, and move-comp; all with no success.

The editor contents I'm loading contain a Flexslider instance (which creates additional markup/element styles) which breaks when the user moves the Flexslider's container. In order to overcome this, I'm hoping to re-initialize the slider immediately so it doesn't break.

Is there another event I could use to run my code? I'm avoiding component:updated because it fires way too many times.

An alternative thought I've had, is, is there a way to update the source of truth in the editor? This way it has the html as it should be, already stored in it's model.

Answers (3)

artf• February 9, 20180 reactions

Have you tried with Components-&-JS?

maxtacco• April 14, 20180 reactions

Having the same problem - I can't figure out an event on a component to listen for when move ends.

maxtacco• April 14, 20180 reactions

So, the only way I was able to make it reasonably work was to listen for the "selectedComponent" event that is fired in https://github.com/artf/grapesjs/blob/b62e032b06f45382849b59e6a3f32049f0a021fc/src/commands/index.js#L168 in my component model's init() method:

editor.on('change:selectedComponent', (editor, model) => {
    if (model === this) {
        // do stuff...
    }
 });

It would be really nice if there were dedicated events for the move command, like move:start and move:end.

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.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

[Question]: Component:Moved Event

Question

Answers (3)

Related Questions and Answers

[Question]: Add a select-option to toolbar

[Question]: Making grapesjs working with angular7 and material

[Question] How to append a plus icon in the column and element section?

[QUESTION] Components 'add' event fires different number of times

Paid Plugins That Match This Issue

Browse Plugin Categories