Change div style upon collision-CodePudding

I have a draggable div1 that I want to change the color of to red when it hits div2. I have used a found collision function, but when I change the statement from just returning true or false to changing the color of the div, it doesn't seem to do anything. Any suggestions? Thanks!

var move = document.querySelector('#div1');

move.addEventListener('mousedown', mousedown);

function mousedown() {

  move.addEventListener('mousemove', mousemove);
  move.addEventListener('mouseup', mouseup);

  function mousemove(e) {

    var x = e.clientX - 100   'px';
    var y = e.clientY - 100   'px';
    this.style.left = x;
    this.style.top = y;

  }

  function mouseup() {
    move.removeEventListener('mousemove', mousemove)
  }

}

 function collision($div1, $div2) {
    var x1 = $div1.offset().left;
    var y1 = $div1.offset().top;
    var h1 = $div1.outerHeight(true);
    var w1 = $div1.outerWidth(true);
    var b1 = y1   h1;
    var r1 = x1   w1;
    var x2 = $div2.offset().left;
    var y2 = $div2.offset().top;
    var h2 = $div2.outerHeight(true);
    var w2 = $div2.outerWidth(true);
    var b2 = y2   h2;
    var r2 = x2   w2;

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
        $('#div1').css('background-color','green');
    } else {
        $('#div1').css('background-color','red');
    }
  }

  window.setInterval(collision, 1000);

 #div1 {
    height: 200px;
    width: 200px;
    background: orange;
    position: fixed;
    z-index: 1;
  }

  #div2 {
    height: 200px;
    width: 200px;
    top: 200px;
    left: 500px;
    background: blue;
    position: absolute;
  }

<head>
  <title>Drag and Drop</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="div1"></div>

    <div id="div2"></div>



  
    <script src="script.js"></script>
  
</body>

CodePudding user response：

You need to pass the parameters to your collission function (https://www.w3schools.com/jsref/met_win_setinterval.asp)

Something like:

window.setInterval(collision, 1000, $('#div1'), $('#div2'));

See demo below:

var move = document.querySelector('#div1');

move.addEventListener('mousedown', mousedown);

function mousedown() {

  move.addEventListener('mousemove', mousemove);
  move.addEventListener('mouseup', mouseup);

  function mousemove(e) {

    var x = e.clientX - 100   'px';
    var y = e.clientY - 100   'px';
    this.style.left = x;
    this.style.top = y;

  }

  function mouseup() {
    move.removeEventListener('mousemove', mousemove)
  }

}

function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1   h1;
  var r1 = x1   w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2   h2;
  var r2 = x2   w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
    $('#div1').css('background-color', 'green');
  } else {
    $('#div1').css('background-color', 'red');
  }
}

// pass parameters to function
window.setInterval(collision, 1000, $('#div1'), $('#div2'));

#div1 {
  height: 200px;
  width: 200px;
  background: orange;
  position: fixed;
  z-index: 1;
}

#div2 {
  height: 200px;
  width: 200px;
  top: 200px;
  left: 500px;
  background: blue;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div id="div1"></div>

<div id="div2"></div>

CodePudding user response：

Here is an example on how you can use the HTML Drag and Drop API.

document.addEventListener("dragenter", e => {
  if (e.target.id == "div2") {
    e.target.classList.add("hover");
  }
});

document.addEventListener("dragleave", e => {
  if (e.target.id == "div2") {
    e.target.classList.remove("hover");
  }
});

#div1 {
  height: 200px;
  width: 200px;
  background: orange;
  position: fixed;
  z-index: 1;
}

#div2 {
  height: 200px;
  width: 200px;
  top: 200px;
  left: 500px;
  background: blue;
  position: absolute;
}

#div2.hover {
  background: green;
}

<div id="div1" draggable="true"></div>
<div id="div2"></div>