碰撞時更改 div 樣式
[英]Change div style upon collision
問題描述
我有一個可拖動的div1 ，我想在它碰到div2時將其顏色更改為紅色。 我使用了發現的碰撞 function ，但是當我將語句從僅返回 true 或 false 更改為更改 div 的顏色時，它似乎沒有做任何事情。 有什么建議么？ 謝謝！
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>
2 個解決方案
解決方案1
0 2022-01-02 17:39:21
您需要將參數傳遞給您的collission function ( https://www.w3schools.com/jsref/met_win_setinterval.asp )
就像是：
window.setInterval(collision, 1000, $('#div1'), $('#div2'));
請參閱下面的演示：
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>
解決方案2
0 2022-01-02 17:39:27
這是一個關於如何使用HTML 拖放 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>
Onclick更改div樣式+ onclick外部div刪除樣式更改
[英]Onclick change div style + onclick outside div remove style change
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.