元素拖拽及临界值判断，以及九宫格的碰撞

  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>
九宫格碰撞
元素拖拽及临界值判断，以及九宫格的碰撞

猜你喜欢
