Prevent an item being dropped into it’s self or any child droppables.

[sami616]

Is there an example anywhere that shows how to prevent a draggable from being dropped into itself, or any droppables inside of it.

Working with a tree like structure. I have a feeling that I need to use location.current.deopTargets. But I don’t have access to that info inside of the canDrop callback. Is there a recommended way perform this kind of validation?

[sami616]

For anyone else who might have a similar issue, I managed to solve my problem like so:

Appreciate this isnt very 'reacty' but it it solves my problem in the simplest way.

 canDrop: ({ source, element }) => {
   // assumes drag handle is inside droptarget
   const sourceEl = source.element.closest('[data-drop-target-for-element="true"]')
   if (sourceEl?.contains(element)) return false
   return true
}

[michaelabrahamian]

Thanks for reporting back with your workaround @sami616! Will close the issue.