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>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>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>