How to disable parent containers from being dropped into each other but allow it's children. about lean-mean-drag-and-drop

[supraniti]

Well i have actually implemented some kind of functionality you might find useful for this or other use cases
note that 'acceptDrop' function is being performed before a drop is being processed
the function code is:
function acceptDrop(container, item) { if (item.contains(container)) { return false; } if (container.classList.contains("lmdd-dispatcher")) { return false; } if (scope.lmddOptions.matchObject) { var cType = container.dataset.containerType || false; var iType = item.dataset.itemType || false; return ((cType) ? ((iType) ? scope.lmddOptions.matchObject [cType][iType] : scope.lmddOptions.matchObject[cType]["default"]) : scope.lmddOptions.matchObject["default"]); } return true; }

you will have to turn this functionality on in your options object:
lmdd.set(document.getElementById('basic-example'), { containerClass: 'container', draggableItemClass: 'item', matchObject:{ parentContainer:{ parentContainer: false } }
now the following path (lmddOptions.matchObject.parentContainer.parentContainer) will return false
and you just have to add the proper markup to your html
<div class="parent-container"></div> for the parent containers

[klusurf]

Grazi, Supraniti.

[Pravin-Parkhi]

@supraniti Thanks for such a wonderful library. I am using this library in my project and have the requirement that two parent containers can't be dropped in each other. I have referred the solution recommended by you in the above comments but couldn't make it work. What is the container and item acceptDrop function is accepting and to which event you are passing that function?

I have created demo here https://stackblitz.com/edit/react-nuuaqw
Let me know if I am doing it in right way or not?

Thanks!