Phenomenon: moving the grid of small squares, enabling the exchange of two small squares position, if coverage does not reach more than 50 percent, to return to their original position
Ideas: // OOA: // obtain a large element // generate nine small element, the element to add style and small initial position // set initial position: two-dimensional array to traverse, and then add to each initial small element location // add two non-built-in property to the small elements are used to record the initial position of the small elements // events // press // press a small element // mobile // make small element following the mouse // lift // when the mouse lifted, the source of the current location of the event, with the initial position of the other elements for comparison // qualifying exchange position
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 thisI * = 100 + .small.style.top 'PX' ; 59 the this .small.style.left = 100 + J * 'PX' ; 60 // used to mark the initial position of each of the small lattice 61 is the this .small. I * = 100 + Top 'PX' ; 62 is the this .small.left = 100 + J * 'PX' ; 63 is 64 the this .small.style.background = randomcolor (); 65 the this .small.innerHTML the String.fromCharCode = ( ++ Letter ); 66 the this .box.appendChild ( the this .small); 67 68 // add event 69 the this .addEvent (); 70 } 71 is } 72 // the console.log (this.box.children [0]) 73 is } 74 75 Cell.prototype.addEvent = function () { 76 var Tag =. 1 ; 77 for ( var I = 0; I < the this .box.children.length; I ++ ) { 78 var that2 = the this ; 79 // . 1, when a mouse down 80 // after a child element is pressed 81 the this .box.children [I] .onmousedown = function (Eve ) { 82 var= that the this ; 83 var E2 = Eve || the window.event; 84 the this .target = e2.target || e2.srcElement; 85 // 2, moving the mouse 86 // mouse to move the page 87 document.onmousemove = function (Eve) { 88 var E = || Eve the window.event; 89 90 that.style.left = e.pageX - that2.box.offsetLeft - e2.offsetX + 'PX' ; 91 is that.style.top = E. pageY - that2.box.offsetTop - e2.offsetY + 'PX' ; 92 ++ = Tag that.style.zIndex ; 93 } 94 95 // . 3, lifting the mouse 96 document.onmouseup = function () { 97 the this .onmousemove = null ; 98 99 for ( var I = 0; I <. 9; I ++ ) { 100 // event source with each of the remaining element is compared 101 iF (that.target! = that2.box.children [I]) { 102 // when a mouse lifted obtained, it is determined whether the current mouse location in one covering element above, and covering an area of over% 50 103 var T = the Math.abs (the parseInt (that.target.style.top) -
the parseInt ([I] that2.box.children .top)); 104 var L = the Math.abs (the parseInt (that.target.style.left) - the parseInt (that2.box.children [I] .left)); 105 106 // when qualified, the positions of the two switching elements 107 IF (T <40 && L <40 ) { 108 // . 1) is first disposed first position as the initial position of the event source qualifying element 109 that. = target.style.top that2.box.children [I] .top; 110 that.target.style.left = ; that2.box.children [I] .left 111 // position 2) and then qualified element the initial position is set to the event source 112
that2.box.children [I] = .style.top that.target.top; 113 that2.box.children [I] = .style.left that.target.left; 114 115 // reset event source and qualifying the initial position of the element 1 16 that2.box.children [I] .top = that.target.top; 117 that2.box.children [I] .left = that.target.left; 1 18 119 that.target.top = that. target.style.top; 120 that.target.left = that.target.style.left; 121 122 //When found, the processing terminates the current function 123 return ; 124 } 125 } 126 } 127 128 // if they meet the criteria element is not found, the position is set as an initial event source distance 129 that.target.style.top = that.target .top; 130. that.target.style.left = that.target.left; 131 is } 132 } 133 } 134 } 135 136 137 new new the 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>