源生JS寫九宮格
阿新 • • 發佈：2019-02-04
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ display: flex; justify-content: center; align-items: center; font-size: 36px; color: #fff; cursor: pointer; position: absolute; width: 120px; height: 120px; border-radius: 20px; } #wrap{ display: flex; justify-content: space-between; flex-wrap: wrap; position:relative; } </style> </head> <body> <!--九宮格--> <div id="wrap"></div> <script> var outer=document.getElementById("wrap"); var mg_top=10; var mg_left=10; for(var i=0;i<3;i++){//九宮格行數 for(var j=0;j<3;j++){//九宮格列數 var str = "1234567890abcdefABCDEF";//產生隨機顏色 var diffColor = "#"; for(var k=0;k<6;k++){ var diffnum = Math.floor(Math.random()*12); diffColor += str[diffnum]; } var oDiv=document.createElement("div");//建立div元素 outer.appendChild(oDiv); oDiv.style.background = diffColor; oDiv.style.top = i*(oDiv.offsetHeight+mg_top)+"px";//每行div的定位top值 oDiv.style.left = j*(oDiv.offsetWidth+mg_left)+"px";//每列div的定位left值 } } //向每個div中新增序號 var str2 = "ABCDEFGHI"; var mDiv = outer.getElementsByTagName("div"); for(var m=0;m<str2.length;m++){ mDiv[m].innerHTML = str2[m]; } for(var n=0;n<mDiv.length;n++){ mDiv[n].onmousedown = function(e){ var evt = e || event; //克隆節點 //用克隆的把原來的替換掉，再把替換掉的加到外層父級div中，防止div消失 var movenum = this; var clone = movenum.cloneNode(); outer.replaceChild(clone,movenum); outer.appendChild(movenum); //獲取事件物件位置 var mouse_left = evt.offsetX; var mouse_top = evt.offsetY; document.onmousemove = function(e){ var evt = e || event; //避免移動塊div會以左上角為移動點使left值和top值變大 var x = evt.clientX-mouse_left; var y = evt.clientY-mouse_top; movenum.style.left = x+"px"; movenum.style.top = y+"px"; } document.onmouseup = function(){ document.onmousemove = null; //替換位置 //兩個陣列，都存放移動塊距離每個固定塊的距離，然後一個從小到大排序，獲取陣列0位置是最小值，然後用indexOf在沒有排序的陣列中找到這個距離是與那個固定div之間的 var arr1 = []; var arr2 = []; for(var d=0;d<mDiv.length-1;d++){ var disX = mDiv[d].offsetLeft-movenum.offsetLeft; var disY = mDiv[d].offsetTop-movenum.offsetTop; var distance = Math.sqrt(Math.pow(disX,2)+Math.pow(disY,2)); arr1.push(distance); arr2.push(distance); } //距離從小到大排序 arr1.sort(function(a,b){ return a-b; }) //得到最小距離後在未經過排序的arr2中找這個距離對應的索引值，就能找到距離移動塊距離最小的那個div var minDis = arr1[0]; var minIndex = arr2.indexOf(minDis); //將距離移動塊距離小的div的left和top給移動塊，移動塊佔據這個div的位置 //移動塊佔據div塊位置後，把克隆的移動塊的位置給被佔據位置的div movenum.style.left = mDiv[minIndex].style.left; movenum.style.top = mDiv[minIndex].style.top; mDiv[minIndex].style.left = clone.style.left; mDiv[minIndex].style.top = clone.style.top; //把克隆塊刪除，結束滑鼠鬆開事件 outer.removeChild(clone); document.onmouseup = null; } } } </script> </body> </html>