How to prevent component:drag:start from firing

[jakeatkins]

Hello,

I'm trying to programmatically prevent the component:drag:start event from firing in certain instances. I found the concept of interrupting the command flow here:

https://grapesjs.com/docs/modules/Commands.html#interrupt-command-flow

but it doesn't seem to be working for default, out-of-the-box commands like component:drag:start. I've tried the following formats of run:{COMMAND-ID}:before, none of which worked:

run:component:drag:start:before
run:component-drag:before
run:core:component-drag:before

Any help, please?

[glaprida]

Have you tried run:component:drag:before ? (I have no idea if it works, sorry)

Other option may be just setting your components to draggable: false

[jakeatkins]

That event name also didn't work.

I have a lot of components, most with specific configurations for their draggable/droppable properties. What's the easiest way to disable DnD for all components temporarily, without having to touch each component's configuration? Is there a way to update the domComponents.draggableComponents value that was set globally in the editor config at the time of init?

[artf]

@jakeatkins those are direct events, not related to a command itself, so they have nothing to do with command flow interruption.

The underlying command used there is tlb-move, so you can interrupt with run:tlb-move:before

[jakeatkins]

Thanks for the clarification, and I've confirmed this is working:

editor.on('run:tlb-move:before', (options: any) => {
  const condition = 1;
  if (condition) {
    options.abort = true;
  }
});