[Feature]: Highlight drop zones

[Joshmamroud]

Hi @artf ,

How would you recommend highlighting the components on the canvas that the selected block can be dropped into based on draggable & droppable rules? In other words, when a user starts dragging a block from the block manager I would like to highlight (add a border or inset box-shadow) the components on the canvas which it can be dropped into. This is not to replace the drop-indicator (not sure what your name for it is) which shows where the block will be placed when dragging it on the canvas but meant to complement it.

Here is an example of what I'm looking to create:

Any help would be greatly appreciated.

Thanks!

[artf]

I think, currently, it's not easy to achieve it. The Sorter module is quite old and messy and I'd need to refactor it in order to allow such functionality (which, for sure, I'd be glad to have). Unfortunately, no ETA for such a thing :/

[Joshmamroud]

@artf ok, thank you for your response!

[kerryj89]

Was just thinking of this. I think it's the natural evolution and necessary when you can set limitations of where something is droppable.

[artf]

With the introduction of Canvas Spots I think this feature request can be considered done. Here is a quick demo example

https://github.com/GrapesJS/grapesjs/assets/11614725/ea956282-b6bd-455e-af9b-6b5fb7707d71

[khushalgupta24]

How can I disable the default green line drop highlighter from places I don't want the component to be dropped, For instance I have containers and blocks, I want to make sure the blocks are dragged into containers only, I have the correct logic implemented, now I want to disable the drop highlighter to highlight invalid drop zones, and only highlight where the block can be dropped Can someone please help me out with this. Thanks.

[pcjaarvis]

@khushalgupta24 , Hi , where u able to do this? have the same problem