How to disable drop for specific blocks/components
Question
Hello,
with the following code we are able to indicate if it's possible to drop other component(blocks) inside that particular component...:
/* Component */
blockManager.add('component', {
label: '<div class="gjs-block-label">COMPONENT</div>',
attributes: { class: 'gjs-fonts gjs-f-b3' },
content: {
name: 'Component',
classes: ['component'],
type: 'component',
droppable: false,
components: `This is the component`
}
});
We are looking to indicate if it's possible to drop other components only for specific blocks.
For example:
A. Container Block - > we want to drop only columns B. Column Block - > we want to drop only columns and components
We thought that we could do that by using an array of selectors which could be dropped inside (as documentation says) but unfortunately is not working:
/*Column*/
blockManager.add('column', {
label: '<div class="gjs-block-label">COLUMN</div>',
attributes: { class: 'gjs-fonts gjs-f-b1' },
content: {
name: 'Column',
classes: ['column'],
type: 'column',
droppable: ['column', 'component'],
components: ``,
}
});
Any ideas? Thank you!
Answers (3)
From the https://github.com/artf/grapesjs/releases/tag/v0.14.17 you get data-gjs-type on all rendered components, therefore you can do something like this:
droppable: '[data-gjs-type="column"], [data-gjs-type="other"]',
Thank you! :)
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1547
How to add component attributes (before rendering)
Hello, I'm looking to auto create components inside a block element and it seems that I manage to do that but with a small missing... How I...
Issue #1661
I've created html table and cannot drag new elements to table cells
Hello. if I create html table with next block of code, everything works, I'm able to drop a Quote, for example, to any cell: But next code...
Issue #1034
insert element or block inside parent element
Good day, i have component, have block i have Trait on listen changes, how can I add "h1 " inside that block "'<div class="container" style...
Issue #1574
Question, Block content from file
Hi, this is not really an issue but more a question. I'm currently using custom blocks in my GrapesJS editor. This is how I create them : I...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.