JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Detect overlapping with JavaScript</h1>



<div id="area">
  <div id="box0"></div>
  <div id="box1">1</div>
  <div id="box2">2</div>
  <div id="box3">3</div>
  <div id="box4">4</div>
</div>

<div id="result"></div>


<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

CSS

body {
  padding: 30px;
  color: #444;
  font-family: Arial, sans-serif;
}

.overlapped {
  border: 1px solid red;
}

.touch {
  margin: 10px;
  transition: margin 1s;
}

.remTouch {
  margin: -10x;
  transition: margin 1s;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

#area {
  border: 2px solid gray;
  width: 500px;
  height: 400px;
  position: relative;
}

#area > div {
  background-color: rgba(122, 122, 122, 0.3);
  position: absolute;
  text-align: center;
  font-size: 50px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

#box0 {
  background-color: rgba(255, 0, 0, 0.5) !important;
  top: 150px;
  left: 100px;
}

#box1 {
  top: 260px;
  left: 50px;
}

#box2 {
  top: 110px;
  left: 160px;
}

#box3 {
  top: 200px;
  left: 200px;
}

#box4 {
  top: 50px;
  left: 400px;
}

p {
  margin: 5px 0;
}

JavaScript

var overlaps = (function() {
  function getPositions(elem) {
    var pos, width, height;
    pos = $(elem).position();
    width = $(elem).width();
    height = $(elem).height();
    return [
      [pos.left, pos.left + width],
      [pos.top, pos.top + height]
    ];
  }

  function comparePositions(p1, p2) {
    var r1, r2;
    r1 = p1[0] < p2[0] ? p1 : p2;
    r2 = p1[0] < p2[0] ? p2 : p1;
    return r1[1] > r2[0] || r1[0] === r2[0];
  }

  return function(a, b) {
    var pos1 = getPositions(a),
      pos2 = getPositions(b);
    return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
  };
})();

function m() {
  var area = $('#area')[0],
    box = $('#box0')[0],
    html;

  html = $(area).children().not(box).map(function(i) {

    if (overlaps(box, this)) {

      $("#box" + (i + 1)).removeClass('remTouch').addClass("touch");


    }
    return '<p>Red box + Box ' + (i + 1) + ' = ' + overlaps(box, this) + '</p>';


  }).get().join('');

  $('#result').html(html);


}

$('#box0').draggable({
  drag: function() {
    $(".touch").removeClass("touch").addClass('remTouch');
    m();
  }
});