1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #box{ 12 width: 100px; 13 height: 100px; 14 background: pink; 15 position: absolute; 16 left:0; 17 top:0; 18 } 19 #imgNode{ 20 width: 200px; 21 position: absolute; 22 left:50%; 23 top:50%; 24 transform: translate(-50%,-50%); 25 } 26 </style> 27 </head> 28 <body> 29 <div id="box">哈哈哈</div> 30 <img id="imgNode" src="img/1.jpg" alt=""> 31 <script type="text/javascript"> 32 window.onload = function () { 33 34 var box = document.getElementById('box'); 35 var imgNode = document.getElementById('imgNode'); 36 // 拿元素距离视口的位置，返回的是一个对象（只能读不能写） 能够拿到距离视口最干净的位置 37 console.log(imgNode.getBoundingClientRect().left); 38 39 box.onmousedown = function (event) { 40 event = event || window.event;//兼容写法 41 // console.log('鼠标按下'); 42 // 元素起始位置 按下鼠标的时候，相对包含块的距离 43 var eleX = box.offsetLeft; 44 var eleY = box.offsetTop; 45 46 // 鼠标按下的位置 47 var startX = event.clientX; 48 var startY = event.clientY; 49 // 对低版本浏览器设置全局捕获 50 box.setCapture && box.setCapture(); 51 document.onmousemove = function (event) { 52 event = event || window.event; 53 // 在移动过程中 根据当前鼠标位置 动态的修改box的left和top 54 // console.log('鼠标移动'); 55 // 获取鼠标移动后的位置 56 var endX = event.clientX; 57 var endY = event.clientY; 58 // 计算鼠标距离差 59 var disX = endX - startX; 60 var disY = endY - startY; 61 // 计算元素最终位置 元素起始位置 + 鼠标距离差（元素距离差） = 元素最终位置 62 var lastX = disX + eleX; 63 var lastY = disY + eleY; 64 65 // 临界值判断，对整个页面四周的临界值判断 66 // document.documentElement.clientWidth - box.offsetWidth - 50,在临界值前留空白,可以产生吸附效果 67 if(lastX > document.documentElement.clientWidth - box.offsetWidth - 50){ 68 // 右侧边界 元素当前的left > 视口的宽度 - 元素本身的宽度 69 lastX = document.documentElement.clientWidth - box.offsetWidth; 70 }else if (lastX < 50){ 71 // 左侧边界 72 lastX = 0; 73 } 74 if(lastY > document.documentElement.clientHeight - box.offsetHeight -50){ 75 // 底部边界 元素当前的top > 视口高度 - 元素高度 76 lastY = document.documentElement.clientHeight - box.offsetHeight; 77 }else if(lastY < 50){ 78 // 顶部边界 79 lastY = 0; 80 } 81 // 设置最终的位置给元素 82 box.style.left = lastX + 'px'; 83 box.style.top = lastY + 'px'; 84 85 86 // 元素设置位置之后，元素才能可能碰到中间的盒子，九宫格碰撞，边界值判断， 87 // 需求,元素碰到图片,切换另一张图片 88 89 //元素偏移量加盒子宽度的距离 90 var boxL = lastX + box.offsetWidth; 91 //图片的left偏移量 92 var imgL = imgNode.getBoundingClientRect().left; 93 94 var boxT = lastY + box.offsetHeight; 95 var imgT = imgNode.getBoundingClientRect().top; 96 97 var boxR = lastX; 98 //图片的left偏移量加图片的宽度 99 var imgR = imgNode.getBoundingClientRect().left + imgNode.offsetWidth; 100 101 var boxB = lastY; 102 var imgB = imgNode.getBoundingClientRect().top + imgNode.offsetHeight; 103 104 if(boxL < imgL || boxT < imgT || boxR > imgR || boxB > imgB){ 105 // 代表碰不上 106 imgNode.src = 'img/1.jpg' 107 }else { 108 // 代表碰上 109 imgNode.src = 'img/2.jpg' 110 } 111 }; 112 document.onmouseup = function () {kuand 113 // 移除鼠标移动和鼠标抬起事件 114 console.log('鼠标抬起'); 115 document.onmousemove = null; 116 document.onmouseup = null; 117 // 对低版本浏览器释放全局捕获 全局捕获有设置就得有释放 118 box.releaseCapture && box.releaseCapture(); 119 }; 120 121 // 解除浏览器默认行为 122 return false; 123 }; 124 125 } 126 </script> 127 </body> 128 </html>
九宫格碰撞
