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

[roytang]

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:

  comps.addType('image-container', 
  {
    model: defaultModel.extend(
    {
      // Extend default properties
      defaults: Object.assign({}, defaultModel.prototype.defaults, 
      {
        droppable: "img",
      }),
    },
    {
      isComponent: function(el) 
      {
        if(el.tagName == 'DIV' && $(el).hasClass("image-container"))
        {
          return {type: "image-container"};
        }
      },
    }),
    view: defaultView
  });

  blockManager.add('image-container', 
  {
    label: 'Image Container',
    attributes: {class:'fa fa-pencil'},
    content: '<DIV class="image-container"></DIV>',
    category: 'Test Blocks',
  });  

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.com/artf/grapesjs/wiki/Components. The source for Component.js says:

    // Indicates if it's possible to drag the component inside others
    // Tip: Indicate an array of selectors where it could be dropped inside
    draggable: true,

    // Indicates if it's possible to drop other components inside
    // Tip: Indicate an array of selectors which could be dropped inside
    droppable: true,

So it looks like they should work the same way. Am I doing something wrong?

Is it better to do this the other way around? i.e. Create a custom image component, and restrict it's draggable property? (I haven't tried this yet - I'm not sure if I can override/extend the default image type's behavior)

[artf]

@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>',

[roytang]

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.

[artf]

I think it might be a problem with the d&d of the block manager. Are you able to drop images dragged from canvas instead of the block panel?

[roytang]

This fix works. Thanks!

[lock]

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.