原生JS写九宫格

原生JS写了一个九宫格，可以实现颜色随机，位置随机，拖拽等功能，直接上图。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>九宫格</title>
       <style>
           body{
               margin: 0;
               padding: 0;
           }
           #wrap{
               position: relative;
           }
           div{
               width: 100px;
               height: 100px;
               border-radius:10px;
               position: absolute;
               font-size: 40px;
               line-height: 100px;
               text-align: center;
           }
       </style>
   </head>
   <body>
       <div id="wrap">

       </div>
       <script type="text/javascript">
           //生成9宫格
           //获取
           var oWrap = document.getElementById("wrap");

           var ml = mt = 10; //margin 值
           for(i=0;i<3;i++){
               for(j=0;j<3;j++){
                   var oDiv = document.createElement("div");
                   oWrap.appendChild(oDiv);

                   oDiv.style.top = i*(oDiv.offsetHeight + mt) + "px";
                   oDiv.style.left = j*(oDiv.offsetWidth + ml) + "px";

oDiv.style.background="rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";
               }
           }
           //插入数字
           var arr = [1,2,3,4,5,6,7,8,9];//或 var arr =["A","B","C","D","E","F","G","H","I"];注意区别
           var aDiv = oWrap.children;
           for(i=0;i<aDiv.length;i++){
               aDiv[i].innerHTML = arr[i];
           }

           //拖拽
           for(i=0;i<aDiv.length;i++){
               aDiv[i].onmousedown = function(e){
                   var evt = e || event;
                   var x = evt.clientX - this.offsetLeft - oWrap.offsetLeft;
                   var y = evt.clientY - this.offsetTop - oWrap.offsetTop;

                   var curNode = this;
                   var cloneNode = curNode.cloneNode();

                   oWrap.replaceChild(cloneNode,curNode);

                   oWrap.appendChild(curNode);

                   document.onmousemove = function(e){
                       var evt = e ||event;
                       var _left = evt.clientX - x - oWrap.offsetLeft;
                       var _top = evt.clientY - y - oWrap.offsetTop;

                       curNode.style.left = _left + "px";
                       curNode.style.top = _top + "px";

                       return false;
                   }
                   document.onmouseup = function(){
                       document.onmousemove = null;

                       //找最小值和最小值索引
                       var arrDis = [];
                       var newArr = [];

                       for(var i =0;i<aDiv.length-1;i++){
                           var _distanceX = curNode.offsetLeft -aDiv[i].offsetLeft;
                           var _distanceY = curNode.offsetTop - aDiv[i].offsetTop;
                           var _distance = Math.sqrt(Math.pow(_distanceX,2)+Math.pow(_distanceY,2));
                           arrDis.push(_distance);
                           newArr.push(_distance);
                       }

                       //取最小值索引
                       arrDis.sort(function(a,b){
                           return a - b;
                       })
                       //console.log(arrDis);
                       var minVal = arrDis[0];
                       var minIndex = newArr.indexOf(minVal);
                       //console.log(minIndex);

                       //另一种取最小值的方法
//                       var minVal = Math.min.apply(null,arrDis);
//                       var minIndex = newArr.indexOf(minVal);

                       //交换位置
                       curNode.style.left = aDiv[minIndex].style.left;
                       curNode.style.top = aDiv[minIndex].style.top;
                       aDiv[minIndex].style.left = cloneNode.style.left;
                       aDiv[minIndex].style.top = cloneNode.style.top;

                       oWrap.removeChild(cloneNode);
                       document.onmouseup = null;
                   }
               }
           }
       </script>
   </body>
</html>

原生JS写 九宫格

猜你喜欢