Tengo un div1 que se puede arrastrar y quiero cambiar el color a rojo cuando llegue a div2 . He usado una función de colisión encontrada , pero cuando cambio la declaración de simplemente devolver verdadero o falso a cambiar el color del div, parece que no hace nada. ¿Alguna sugerencia? ¡Gracias!
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>Debe pasar los parámetros a su función de collission ( https://www.w3schools.com/jsref/met_win_setinterval.asp )
Algo como:
window.setInterval(collision, 1000, $('#div1'), $('#div2'));Vea la demostración a continuación:
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>Aquí hay un ejemplo de cómo puede usar la API de arrastrar y soltar de HTML .
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>