BUG: Restricting Drop on Wrapper Component

Question

Version: 0.16.22

Are you able to reproduce the bug from the demo?

[ ] Yes [ X] No - requires editing js.

What is the expected behavior? wrapper component should not be droppable once droppable attribute is set to false.

What is the current behavior?` Nothing happens when this attribute is set.

Describe the bug detailed Child components can be restricted using data-gjs-droppable=".foo" or data-gjs-droppable="false", but this attribute does nothing when set on the wrapper component using the DomComponent API. I have tried adding them using domComponents in init, directly after init, or waiting for editor onload. I have tired using attributes of droppable, data-droppable, and/or data-gjs-droppable. The use case for this is to make sure users can't drop items outside my base template, since it would mess up post-processing. I am new to grapejs but find no info on this in issues or on stackoverflow/google etc.

Are you able to attach screenshots, screencasts or a live demo?

[X ] Yes (attach) [ ] No

https://codesandbox.io/s/kind-ritchie-5ue7i creates a wrapper like:

<div data-gjs-type="wrapper" draggable="true" data-highlightable="1" droppable="false" data-droppable="false" data-gjs-droppable="false" id="c55" class=""> ...

Answers (3)

RJCAM• September 10, 20201 reactions

Hi @BillTheGoat try this after init:

editor.getWrapper().set({
    'droppable': false
});

RJCAM• September 11, 20201 reactions

I think it's because the wrapper doesn't make part of DomComponents. DomComponents are only the components inside of the wrapper. :smile:

BillTheGoat• September 11, 20201 reactions

Hmmm. I tried this because the API docs list the DomComponents.getWrapper() as its first function, and it does apply attributes as seen in my sandbox above. It was doubly odd to me because it seems like the editor.getWrapper() function is just a wrapper for editor.get("DomComponents").getWrapper() in the source ;).

Edit: in fact wrapper is inside domComponents init scope, so this works:

domComponents: {
    wrapper: {
	droppable: false,
    }
},

Thank you so much for your great work.

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

BUG: Restricting Drop on Wrapper Component

Question

Answers (3)

Related Questions and Answers

BUG: Textable not working with extended text component

BUG (v0.16.41): Button component with draggable property is not working properly

BUG: Paste as plain text into Text component adds <font /> wrapper to pasted text

BUG: Default Content is getting Inserted while using setComponents if Tag Body is empty

Paid Plugins That Match This Issue

Browse Plugin Categories