Prevent Custom Component from being nested / dropped into other custom components

[stljeff1]

Hi Community,

I have a series of blocks with various content inside. Lets call them "Jeff's Content Blocks".

How do I prevent Jeff's Content Blocks from being dropped inside of other Jeff's Content Blocks?

I want to produce the following HTML structure.

BODY

• <Jeff's Content Block>
• <Jeff's Content Block>
• <Jeff's Content Block>
  /BODY

My understanding of the problem.

I am unsure hows to solve this problem, or even if it is possible. So far, I have tried making a custom component, and setting the draggable property on my model using a :not() selector. This does not seem to be working. It is very important that I force these content blocks to be stackable, and not nestable, but I am stumped and would appreciate any insight and feedback.

(Blocks can be nested inside other elements, just not other content blockss.)

I created a jsFiddle that (roughly) shows what I want to do.

https://jsfiddle.net/unavrqfg/4/

This jsFiddle appears to do what I want to do at first, but not really. Indeed, it looks like I am unable to drag my custom content blocks into other custom content blocks. However, according to my layers panel, I am indeed nesting my blocks.

Am I misunderstanding the difference between components and blocks?

I was able to get 'draggable' working using simpler blocks. Is draggable only relevant on simple components?

[artf]

Yeah :not() doesn't work for nested selectors, but you can use a custom function for draggable/droppable properties, eg.

defaults: {
  draggable: (src, target) => {
    return ![target, ...target.parents()].some(cmp => cmp.is('myContentComponent'))
  },
}