<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
div{ position:absolute;left:0;top:0; width:100px; height:100px; background:green;}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById("div1");
var aDiv = document.getElementsByTagName("div");
for(var i = 0; i < aDiv.length; i++){
drag(aDiv[i]);
}
function drag(oDiv1){
oDiv1.onmousedown = function(ev){
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv1.offsetLeft;
var disY = oEvent.clientY - oDiv1.offsetTop;
document.onmousemove = function(ev){
var oEvent = ev || event;
for(var i = 0; i < aDiv.length; i++){
if(oDiv1 == aDiv[i]) continue;
if(collTest(oDiv1,aDiv[i])){
aDiv[i].style.background = "red";
} else {
aDiv[i].style.background = "green";
}
}
oDiv1.style.left = oEvent.clientX - disX + "px";
oDiv1.style.top = oEvent.clientY - disY + "px";
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
oDiv1.releaseCapture && oDiv1.releaseCapture();
};
oDiv1.setCapture && oDiv1.setCapture();
return false;
};
}
function collTest(obj1,obj2){
var l1 = obj1.offsetLeft;
var t1 = obj1.offsetTop;
var r1 = l1 + obj1.offsetWidth;
var b1 = t1 + obj1.offsetHeight;
var l2 = obj2.offsetLeft;
var t2 = obj2.offsetTop;
var r2 = l2 + obj2.offsetWidth;
var b2 = t2 + obj2.offsetHeight;
if(r1 < l2 || b1 < t2 || l1 > r2 || t1 > b2){//没碰到
return false;
} else {
return true;
}
}
};
</script>
</head>
<body>
<div id="div1"></div>
<div style="left:200px;top:100px;"></div>
<div style="left:400px;top:100px;"></div>
<div style="left:600px;top:100px;"></div>
<div style="left:800px;top:100px;"></div>
<div style="left:200px;top:400px;"></div>
<div style="left:400px;top:400px;"></div>
<div style="left:600px;top:400px;"></div>
<div style="left:800px;top:400px;"></div>
</body>
</html>
时间： 2024-08-12 16:23:40