Desea que el rectángulo que se puede arrastrar solo se vuelva rojo cuando choca con el azul y ya no se arrastra. Para verificar si el rectángulo se está arrastrando, agrego un atributo title="notmoving" cuando se llama a la función mouseup() y elimino el atributo cuando se vuelve a arrastrar. Cuando verifico la consola, el atributo se agrega y elimina según lo previsto, pero la variable no se notMoving , que es una condición en la función de collision() y se supone que debe verificar con .hasAttribute() si el atributo está presente o no, solo regresa falso. ¿Alguna sugerencia? ¡Gracias!
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>