Este es mi codepen . Quiero verificar si los divs se superponen entre sí con jQuery. Escribí un código para eso pero no funciona con cajas redondas. solo funciona con cuadrados y rectángulos. ¿Cómo puedo hacer que funcione con divs redondos?
const coordinates = (className) => { const val = document.querySelector(className); return { y: val.offsetTop, x: val.offsetLeft, yh: val.offsetTop + val.offsetHeight, xw: val.offsetLeft + val.offsetWidth, } } const cm = coordinates(".circle.small"); const cl = coordinates(".circle.large"); const offset_x = cm.x < cl.x && cm.xw > cl.x; const offset_xw = cm.x < cl.xw && cm.xw > cl.xw; const offset_cx = cm.x < cl.xw && cm.xw < cl.xw; const offset_cy = cm.y < cl.yh && cm.yh < cl.yh; const offset_y = cm.y < cl.y && cm.yh > cl.y; const offset_yh = cm.y < cl.yh && cm.yh > cl.yh; const is_x = offset_x || offset_xw || offset_cx; const is_y = offset_y || offset_yh || offset_cy; console.log(is_x, is_y); .circle { width: var(--square); height: var(--square); background: var(--bg); border-radius: 50%; } .parent { margin-left: 5px; } .parent2 { margin-left: 15px; } .small { --square: 50px; --bg: red; margin-bottom: -5px; } .large { --square: 100px; --bg: green; } <div class="parent"> <div class="circle small"></div> </div> <div class="parent2"> <div class="circle large"></div> </div>Su lógica para calcular el delta entre las posiciones de los círculos no es del todo correcta. Necesita obtener X e Y del centro de cada círculo, luego averiguar si la hipotenusa calculada a partir de esos dos puntos es menor que la mitad de los radios combinados.
Aquí hay un ejemplo de trabajo. Tenga en cuenta que solo agregué jQuery/jQueryUI para facilitar el arrastre de los círculos para las pruebas; ninguna de estas bibliotecas es necesaria para el uso de producción.
let $label = $('.overlap-label span'); const hasOverlap = (x0, y0, r0, x1, y1, r1) => Math.hypot(x0 - x1, y0 - y1) <= r0 + r1; const coordinates = (className) => { const el = document.querySelector(className); const rect = el.getBoundingClientRect(); const radius = el.offsetHeight / 2; return { y: rect.top + radius, x: rect.left + radius, r: radius } } const checkForOverlap = () => { const cm = coordinates(".circle.small"); const cl = coordinates(".circle.large"); $label.text(hasOverlap(cm.x, cm.y, cm.r, cl.x, cl.y, cl.r)); } $('.parent').draggable().on('drag', checkForOverlap); .circle { width: var(--square); height: var(--square); background: var(--bg); border-radius: 50%; display: inline-block; } .parent { display: inline-block; } .small { --square: 50px; --bg: red; } .large { --square: 100px; --bg: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" /> <div class="overlap-label">Circles are overlapping? <span>false</span></div> <div class="parent"> <div class="circle small"></div> </div> <div class="parent"> <div class="circle large"></div> </div>