现象：移动格子里的小方块，实现两个小方块位置的交换，若覆盖面积没有达到50%以上，回到自己原来的位置
思路： // OOA: // 获取大元素 // 生成九个小元素，给小元素添加样式及其初始位置 // 初始位置的设置：用二维数组来遍历，然后给每个小元素添加初始位置 // 给小元素添加两个非内置的属性，分别用来记录小元素的初始位置 // 事件 // 按下 // 按下一个小元素 // 移动 // 让小元素跟随鼠标移动 // 抬起 // 当鼠标抬起后，将事件源的当前位置，与其他元素的初始位置作比较 // 符合条件的交换位置
1 实现： 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>九宫格</title> 9 <style> 10 * { 11 padding: 0; 12 margin: 0; 13 } 14 li { 15 list-style: none; 16 } 17 .box { 18 width: 300px; 19 height: 300px; 20 border: 1px solid #333; 21 border-radius: 10px; 22 margin: 100px auto; 23 position: relative; 24 } 25 .lump { 26 width: 80px; 27 height: 80px; 28 position: absolute; 29 top: 0; 30 left: 0; 31 margin: 10px; 32 border-radius: 10px; 33 font-size: 20px; 34 color: #fff; 35 line-height: 80px; 36 text-align: center; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="box"> 42 </div> 43 </body> 44 <script> 45 function Cell() { 46 this.box = document.querySelector(".box"); 47 48 //先生成九个小格子 49 this.create(); 50 } 51 52 Cell.prototype.create = function() { 53 var letter = 65; 54 for(var i=0;i<3;i++) { 55 for(var j=0;j<3;j++) { 56 this.small = document.createElement("div"); 57 this.small.className = "lump"; 58 this.small.style.top = i*100 + 'px'; 59 this.small.style.left = j*100 + 'px'; 60 // 用来标记每个小格子的初始位置 61 this.small.top = i*100 + 'px'; 62 this.small.left = j*100 + 'px'; 63 64 this.small.style.background = randomColor(); 65 this.small.innerHTML = String.fromCharCode(letter++); 66 this.box.appendChild(this.small); 67 68 // 添加事件 69 this.addEvent(); 70 } 71 } 72 // console.log(this.box.children[0]) 73 } 74 75 Cell.prototype.addEvent = function() { 76 var tag = 1; 77 for(var i=0;i<this.box.children.length;i++) { 78 var that2 = this; 79 // 1、鼠标按下时 80 // 某个子元素被按下后 81 this.box.children[i].onmousedown = function(eve){ 82 var that = this; 83 var e2 = eve || window.event; 84 this.target = e2.target || e2.srcElement; 85 //2、鼠标移动时 86 // 鼠标在页面中移动 87 document.onmousemove = function(eve) { 88 var e = eve || window.event; 89 90 that.style.left = e.pageX - that2.box.offsetLeft - e2.offsetX + 'px'; 91 that.style.top = e.pageY - that2.box.offsetTop - e2.offsetY + 'px'; 92 that.style.zIndex = tag++; 93 } 94 95 //3、鼠标抬起时 96 document.onmouseup = function() { 97 this.onmousemove = null; 98 99 for(var i=0;i<9;i++) { 100 //将事件源与剩余的每个元素相比较 101 if(that.target != that2.box.children[i]) { 102 // 求出鼠标抬起时，判断鼠标当前的位置是否覆盖在某一个元素上面，且覆盖面积超50% 103 var t = Math.abs(parseInt(that.target.style.top) -
parseInt(that2.box.children[i].top)); 104 var l = Math.abs(parseInt(that.target.style.left) -
parseInt(that2.box.children[i].left)); 105 106 //符合条件时，将两个元素的位置交换 107 if(t<40 && l<40){ 108 // 1）首先先将事件源的位置设置为符合条件的元素的初始位置 109 that.target.style.top = that2.box.children[i].top; 110 that.target.style.left = that2.box.children[i].left; 111 // 2）再将符合条件的元素的位置设置为事件源的初始位置 112 that2.box.children[i].style.top = that.target.top; 113 that2.box.children[i].style.left = that.target.left; 114 115 // 重新设置事件源和符合条件元素的初始位置 116 that2.box.children[i].top = that.target.top; 117 that2.box.children[i].left = that.target.left; 118 119 that.target.top = that.target.style.top; 120 that.target.left = that.target.style.left; 121 122 // 当找到后，直接结束当前函数 123 return; 124 } 125 } 126 } 127 128 // 若没有找到符合条件的元素，将事件源的位置设置为初始距离 129 that.target.style.top = that.target.top; 130 that.target.style.left = that.target.left; 131 } 132 } 133 } 134 } 135 136 137 new Cell(); 138 139 function random(a,b) { 140 return Math.round(Math.random()*(a-b)+b); 141 } 142 143 function randomColor() { 144 return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")"; 145 } 146 </script> 147 </html>