Estoy usando la biblioteca interact.js para arrastrar y soltar elementos dentro de una cuadrícula. Una vez que esté dentro de mi cuadrícula, quiero poder cambiar su tamaño, lo que funciona, pero ¿cuál es la forma recomendada de evitar que se superpongan dos elementos de tamaño variable? Básicamente, quiero detener el oyente de movimiento de tamaño variable cuando toca otro elemento de tamaño variable. Ya sé cuándo un elemento redimensionable golpea a otro, pero ¿cómo evito que el usuario pueda superponerlos?

función completa para cambiar el tamaño de los elementos:

 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 }), ], }); } }