<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background: red;
position: absolute;
z-index: 1;
}
#box2 {
width: 300px;
height: 200px;
background: green;
position: absolute;
left: 500px;
top: 300px;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
<script>
var box = document.getElementById('box');
var box2 = document.getElementById('box2');
// 一打开就求box2的四边距离
var L2 = box2.offsetLeft;
var T2 = box2.offsetTop;
var R2 = box2.clientWidth + L2;
var B2 = box2.clientHeight + T2;
console.log(L2, T2, R2, B2);
box.onmousedown = function (ev) {
// 设置全局捕获，兼容IE8及以下
if (box.setCapture) {
box.setCapture();
}
var ev = ev || event;
// 可视区宽高
var clientW = document.documentElement.clientWidth;
var clientH = document.documentElement.clientHeight;
// 盒子宽高
var boxW = box.clientWidth;
var boxH = box.clientHeight;
// 鼠标到盒子的距离
var disX = ev.clientX - box.offsetLeft;
var disY = ev.clientY - box.offsetTop;
// 拖动
document.onmousemove = function (ev) {
var ev = ev || event;
var L = ev.clientX - disX; // 盒子到左边的距离
var T = ev.clientY - disY; // 盒子到顶部的距离
if (L < 0) {
L = 0;
} else if (L > clientW - boxW) {
L = clientW - boxW;
}
if (T < 0) {
t = 0;
} else if (T > clientH - boxH) {
T = clientH - boxH;
}
box.style.left = L + 'px';
box.style.top = T + 'px';
// 求拖动盒子的四边距离
var L1 = L;
var T1 = T;
var R1 = L1 + boxW;
var B1 = T1 + boxH;
// 判断box与box2是否碰撞
if (R1 < L2 || B1 < T2 || L1 > R2 || T1 > B2) { // 未碰撞，box2维持原色
box2.style.background = 'green';
} else { // 发生碰撞，box2变为黄色
box2.style.background = 'yellow';
}
}
// 抬起
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
// 释放全局捕获，兼容IE8及以下
if (box.releaseCapture) {
box.releaseCapture();
}
}
return false; // 阻止浏览器默认行为
}
</script>
</body>
</html>
