Want the draggable rectangle to only turn red when it's colliding with the blue one and it's not being dragged anymore. In order to check if the rectangle is being dragged I add an attribute title="notmoving" when the mouseup() function is called and remove the attribute when it's being dragged again. When I check the console the attribute is being added and removed as intended, but the variable notMoving which is a condition in the collision() functiuon and is supposed to check with .hasAttribute() whether the attribute is present or not, only ever returns false. Any suggestions? Thanks!
var move = document.querySelector('.move');
move.addEventListener('mousedown', mousedown);
function mousedown() {
move.addEventListener('mousemove', mousemove);
move.addEventListener('mouseup', mouseup);
move.removeAttribute("title");
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);
move.setAttribute("title", "notmoving");
}
}
var notMoving = document.getElementById("div1").hasAttribute("title");
// HITTING
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) && notMoving) {
$('#div1').css('background-color', 'red');
} else {
$('#div1').css('background-color', 'green');
}
}
// pass parameters to function
window.setInterval(collision, 200, $('#div1'), $('#div2'));.move {
height: 200px;
width: 200px;
background: orange;
position: fixed;
z-index: 1;
}
.hitbox {
height: 200px;
width: 200px;
top: 200px;
left: 500px;
background: blue;
position: absolute;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="move" id="div1"></div>
<div class="hitbox" id="div2"></div>
</body>