Prevent component drop on-the-fly

[hvolmer]

Hello. I need to prevent dropping of certain components onto others, but I need to make the decision during the drag operation. Is there a way to hook into the drag operation and prevent the various "insertion" indicators and / or prevent a drop from taking place?

One of my use cases is to allow reordering of elements within a container, but not allow those elements to be dragged out to other containers. So if I'm dragging a component and move it outside the container, other containers will not be able to receive the dragged component.

Thanks!

[bgrand-ch]

Hello,

const editor = grapesjs.init({})

editor.on('component:drag', ({
  target: draggedComp,
  parent: parentComp,
  index
}) => {
  // If parentComp is not your container, then parentComp.set('droppable', false) or another similar way

  console.log({
    draggedComp,
    parentComp,
    index
  })
})

🤔

Sources:

• https://grapesjs.com/docs/getting-started.html#start-from-the-canvas
• https://grapesjs.com/docs/api/editor.html#available-events
• https://grapesjs.com/docs/api/component.html#component