Best practices to disallow / deny / disable drop actions on some droppables and how to visualize this

[olee]

As the title says, I tried finding any documentation or other discussions about this, but could not really find anything.
Can somebody explain how you are approaching these situations?

[jarredwitt]

Hi @olee, I just finished a page builder that had this ability with nested containers. This can be done after you include some helpful data in the draggables and droppables.

I'll use rows, columns and elements as an example. A column can only be dropped over a row and an element can only be dropped over a column.

We set up our draggables/droppables to have some helpful hints in the data prop, something like:

const {...} = useDroppable({
  id,
  data: {
   type: 'row', // could also be column since those are droppable too
  }
});

const {...} = useDraggable({
  id,
  data: {
    type: 'column', // could also be element
  }
});

Once you have that setup you use the onDragOver event handler for the blocking re-parenting logic:

const onDragOver = (e) => {
  const {active, over} = e;
  const activeData = active.data.current;

  if (!over) {
    return;
  }

  const overData = over.data.current;

  if (activeData.type === 'column' && overData.type === 'row') {
    // handle column dropping logic
  } else if (activeData.type === 'element' && overData.type === 'column') {
    // handle element dropping logic
  }
}

That's a very simplified example, but hopefully that gives an idea on how the data prop in the draggable/droppable can be used.

On the visualizing bit, you can use the isOver and over props returned from the useDroppable hook to change the appearance of the active droppable.

[olee]

So basically, it's all for the developer to decide on how to handle the data and decide on whether something is droppable or not.
That's also the way I approached it, but good to know that this is indeed the intended way to do it 👍