javascripthtmlcssgetboundingclientrect

getBoundingClientRect returns as always touching

trying to make it detect when each element is being touched by the draggable element, but it returns as reaction2 always touching even when the element is nowhere near reaction2

js:

dragElement(document.getElementById("draggable"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    
    touches(physical, reaction, "physical")
    touches(chemical, reaction, "chemical")
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

//draggable code^
let reacTouch;
let reacType;
var physical = document.getElementById("physical")
var chemical = document.getElementById("chemical")
var reaction = document.getElementById("draggableheader")

function touches(el1, el2, reacTouch) {
  const r1 = el1.getBoundingClientRect();
  const r2 = el2.getBoundingClientRect();
  
  if (r2.left - r1.right < 1) {
    console.log('touching');
  }
  else {
    console.log('not touching');
  }
}

html:

<span id='physical' class="phys">physical change</span>
<span id='chemical' class="chem">chemical change</span>


<div id="draggable">
  <div id="draggableheader"></div>
</div>

CSS:

#draggable {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#draggableheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

.phys {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  float: 1;
  width: 50%;
  height: 100px;
  margin-top:20px;
  //position: absolute;
}

.chem {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  float: 1;
  width: 50%;
  height: 100px;
  margin-top:20px;
  position: relative;
  left: 300px;
}

keeps detecting chem as touching no matter what, and correctly detects when physical is touching and not touching

edit: added more detail in the code examples to see if something else was the issue and I just misdiagnosed the problem

Solution

  • The problem is that the way of checking whether two elements are touching is not check:ing enough. It needs to check whether one element is totally to the left of the other, and to repeat the check the other way round. It also needs to check whether one element is totally below the other and vice versa.

    A couple of small points:

    Here's a snippet with the testing of left/right and top/bottom positions. Note, they test for overlap, not for whether the elements are exactly touching but not overlapping - that might be quite a difficult maneuver for the user.

    dragElement(document.getElementById("draggable"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    
    touches(physical, reaction, "physical")
    touches(chemical, reaction, "chemical")
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

//draggable code^
let reacTouch;
let reacType;
var physical = document.getElementById("physical")
var chemical = document.getElementById("chemical")
var reaction = document.getElementById("draggableheader")

function touches(el1, el2, reacTouch) {
  const r1 = el1.getBoundingClientRect();
  const r2 = el2.getBoundingClientRect();
  // to see whether 2 rectangles are overlapping or not check if one is totally to the left or totally above the other and vice-versa
  function dontOverlapLR(a, b) {return (a.right < b.left || (b.right < a.left)); }
  function dontOverlapTopBottom(a, b) {return (a.bottom < b.top || (b.bottom < a.top)); }
  if (dontOverlapLR(r1, r2) || dontOverlapTopBottom(r1, r2)) {
 // if (r2.left - r1.right < 1) {
    console.log('not touching' + reacTouch);//ADDED reacTouch
  }
  else {
    console.log('touching' + reacTouch);//ADDED reacTouch
  }
}
    body {
  width: 100vw;
  height: 100vh;
}
#draggable {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#draggableheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

.phys {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 /* float: 1; */
  width: 50%;/* giving a span a width doesn't */
  height: 100px;
  margin-top:20px;
 /* //position: absolute;*/
}

.chem {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
/*  float: 1; */
  width: 50%;
  height: 100px;
  margin-top:20px;
  position: relative;
  left: 300px;
}
    <span id='physical' class="phys">physical change</span>
<span id='chemical' class="chem">chemical change</span>


<div id="draggable">
  <div id="draggableheader"></div>
</div>