Javascript 如何判断两个圆形div是否重叠

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>