Issue #484💬 AnsweredOpened November 5, 2017by roytang1 reactions

Can I restrict what blocks that can be dropped into a container

Quick answerby roytang1

This fix works. Thanks!

Read full answer below ↓

Question

My intent is to create a block that should allow only image components (I'm using the default one from grapes-blocks-basic) to be dropped inside it. I have the following test code: However, when I run the above code, what happens is that I can't drop an image component inside the Image Container. The green drop cursor only appears around the top/bottom/sides of the container but it won't appear inside it. Actually, I can't drop ANY component inside it. I kind of assumed that the "droppable" property could work the same way as the "draggable" property does in the example here: https://github.c...

Answers (3)

roytangNovember 11, 2017

This fix works. Thanks!

artfNovember 6, 2017

@roytang your code seems ok, probably the problem is just because your component is "too much empty" so the mouse pointer just can't get in. Try to add a little bit of padding and see if it works

content: '<div class="image-container" style="padding:20px"></div>',
roytangNovember 7, 2017

Mmm. I have image-container styled with width and height 100px. Also, removing the droppable property in the extended model allows me to drop text and images inside it.

Related Questions and Answers

Continue research with similar issue discussions.

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

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.