I am using the interact.js library for drag-and-dropping elements inside a grid. Once it is inside my grid I want to be able to resize them which is working, but what is the recommend way for preventing two resizable elements from overlapping. I basically want to stop the resizable move listener when it hits another resizable element. I already know when one resizable elements hits another, But how do I prevent the user from being able to overlap them?

full function for resizing elements:

function resizeZone(target, parentContainer, minHeight, width) {

    if (interact.isSet(target) == false) {

        interact(target)
            .resizable({
                edges: { top: true, left: false, bottom: true, right: false },
                listeners: {
                    start: function (event) {
                        startDataSet = event.target.dataset;
                        startDeltaRect = event.deltaRect;
                        startRect = event.rect;
                    },
                    move: function (event) {

                        var elementsAtDragLocation = document.elementsFromPoint(event.x0, event.client.y);

                        for (let elementId in elementsAtDragLocation) {
                            var result = elementsAtDragLocation[elementId].getAttribute('free-schedule');

                            var isFalseSet = (result === 'false');
                            if (isFalseSet) {
                                let dragLocationRoutineId = elementsAtDragLocation[elementId].id;
                                let routineId = event.target.id;

                                // if user drags element past other element they will overlap, because the isFalseSet check won't work =(
                                if (dragLocationRoutineId !== routineId) {
                                    return;
                                }
                            }
                        }

                        let { x, y } = event.target.dataset

                        x = (parseFloat(x) || 0) + event.deltaRect.left
                        y = (parseFloat(y) || 0) + event.deltaRect.top

                        Object.assign(event.target.style, {
                            width: `${event.rect.width}px`,
                            height: `${event.rect.height}px`,
                            transform: `translate(${x}px, ${y}px)`
                        });

                        Object.assign(event.target.dataset, { x, y });
                    },
                    end: async function (event) {
                        let routineId = event.target.id;

                        ResizeTaskTrigger(routineId, event.rect.height, event.deltaRect);

                    },
                },
                modifiers: [
                    interact.modifiers.restrictSize({
                        min: { width: width, height: minHeight },
                    }),
                    interact.modifiers.restrictRect({
                        restriction: parentContainer
                    }),
                ],
            });
    }
}