Issue #3608Opened July 9, 2021by anlumo0 reactions

FEAT: Disable Dragging

Question

What are you trying to add to GrapesJS?

I have implemented an alternative text editing component (not based on RTE). I want people to be able to drag-select text in this component.

Describe your feature request detailed

The problem is that drag-selection also triggers dragging the whole component. I want to be able to move the component on the page only via the move toolbar item, to stop it interfering with text selection.

Is there an alternative at the latest version?

I'm currently overriding the drag like this:

element.addEventListener('dragstart', event => {
    event.stopPropagation();
    event.preventDefault();
    return false;
}, true);

in the view's init function. This kinda works in Chrome, but not always and also causes more issues in Firefox.

Answers (3)

iabhiyaan• July 21, 20210 reactions


editor.on('component:drag:start', props => {
    const { target } = props;
    target.set({
        draggable: false,
        propagate: ['draggable']
    });
});

anlumo• July 23, 20210 reactions

Wouldn't that disable all dragging, even from the toolbar and the layer manager?

anlumo• July 23, 20210 reactions

I just tested it, another issue is that the dragging operation still eats the event, it just renders the component disabled.

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

FEAT: Disable Dragging

Question

Answers (3)

Related Questions and Answers

FEAT: Enhanced Shadow DOM Support

FEAT: Mark Component as Dirty

FEAT: Add referrerPolicy to image loading through asset manager

FEAT: Add support for promises to custom RTE API

Paid Plugins That Match This Issue

Browse Plugin Categories