JavaScript: Detect if DOM element overlaping, inside or ouside with DOM element?

Question

I'm making a small game in JavaScript. I've created a small example js fiddle demo link. There are three situations as listed bellow:

• A: Outside of target object.
• B: Overlaping with target object's border.
• C: Inside of target object.

According to Have object detect if completely inside other object JavaScript, I've known how to detect if the object inside of target (Situation C). How about situation A and B?

<div class="main">
    <div class="target"></div>
    <div class="obj">A</div>
    <div style="top:15%; left:50%;" class="obj">B</div>
    <div style="top:25%; left:35%;" class="obj">C</div>
</div>

Answer 1

One way to do this would be to use Element#getBoundingClientRect() to obtain the absolute coordinates of the DOM elements being classified for overlap, containment, etc.

This function returns to top, right, bottom and left coordiates of the corresponding DOM element which you can use to determine containment of an element with respect to a container.

You could implement a function like findContainment() shown below, where the containment of element is classified against a container element:

function findContainment(element, container) {

  /*
  Obtain the bounding rectangle for each element 
  */
  const brE = element.getBoundingClientRect()
  const brC = container.getBoundingClientRect()

  /* 
  If the boundaries of container pass through the boundaries of
  element then classifiy this as an overlap 
  */
  if (
    /* Does container left or right edge pass through element? */
    (brE.left < brC.left && brE.right > brC.left) ||
    (brE.left < brC.right && brE.right > brC.right) ||
    /* Does container top or bottom edge pass through element? */
    (brE.top < brC.top && brE.bottom > brC.top) ||
    (brE.top < brC.bottom && brE.bottom > brC.bottom)) {

    return "overlap";
  }

  /* 
  If boundaries of element fully contained inside bounday of
  container, classify this as containment of element in container
  */
  if (
    brE.left >= brC.left &&
    brE.top >= brC.top &&
    brE.bottom <= brC.bottom &&
    brE.right <= brC.right
  ) {
    return "contained"
  }

  /* 
  Otherwise, the element is fully outside the container 
  */
  return "outside"

}

const main = document.querySelector(".main")
console.log("A", findContainment(document.querySelector(".a"), main))
console.log("B", findContainment(document.querySelector(".b"), main))
console.log("C", findContainment(document.querySelector(".c"), main))
console.log("D", findContainment(document.querySelector(".d"), main))
console.log("E", findContainment(document.querySelector(".e"), main))

.main {
  width: 50%;
  height: 200px;
  border: 5px solid #000;
  position: relative;
}

.obj {
  width: 40px;
  height: 40px;
  border: 1px solid blue;
  position: absolute;
}

<div class="main">
  <div style="top:105%; left:25%;" class="obj a">A</div>
  <div style="top:15%; left:-5%;" class="obj b">B</div>
  <div style="top:20%; left:40%;" class="obj c">C</div>
  <div style="top:20%; left:110%;" class="obj d">D</div>
  <div style="top:90%; left:95%;" class="obj e">E</div>
</div>

Here's a working fiddle as well - hope that helps!