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

artf · Accepted Answer

Have you tried with Components-&-JS?

maxtacco · Answer

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

maxtacco · Answer

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.

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

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories