js九宫格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                padding: 0;
                margin: 0;
            }
            #wrap{
                position: relative;
            }
            #wrap div{
                position: absolute;
                width: 100px;
                height: 100px;
                border-radius: 10px;
                font-size: 40px;
                text-align: center;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            
        </div>
        <script type="text/javascript">
            //第一步：生成9个div
            //第二步：样式设置 考虑行列结构
            var oWrap = document.getElementById("wrap");
            /*for(var i = 0; i < 9; i++){
                var oDiv = document.createElement("div");
                oWrap.appendChild(oDiv);
            }*/
            
            //行列结构 就考虑循环嵌套
            var mt = ml = 10;
            for(var i = 0; i < 3; i++){ //hang
                for(var j = 0; j < 3; j++){//lie
                    var oDiv = document.createElement("div");
                    oWrap.appendChild(oDiv);
                    //left值和列有关
                    oDiv.style.left = (oDiv.offsetWidth+ml)*j+"px";
                    //top值和行有关
                    oDiv.style.top = (oDiv.offsetHeight+mt)*i+"px";
                    oDiv.style.background = "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";
                }
            }
            
            
            var textArr = "ABCDEFGHI";
            
            var aItems = oWrap.children;
            //var len = aItems.length;
            
            for(var i = 0; i < 9; i++){
                aItems[i].innerText = textArr[i];
            }
            
            //拖拽
            
            for(var i = 0; i < aItems.length; i++){
                aItems[i].onmousedown = function(e){
                    var evt = e || event;
                    var x  = evt.offsetX;
                    var y = evt.offsetY;
                    //console.log(this);
                    var dragItem = this;
                    
                    //克隆一个拖拽对象
                    var cloneNode = dragItem.cloneNode();
                    cloneNode.style.border = "1px dashed #cecece";
                    
                    //为了让拖拽对象和原来的位置进行比较
                    oWrap.replaceChild(cloneNode,dragItem);
                    //还要将拖拽对象放到最后
                    oWrap.appendChild(dragItem);
                    
                    //拖拽对象应该在最上面的
                    dragItem.style.zIndex = 1;
                    
                    

                    document.onmousemove = function(e){
                        var evt = e || event;
                        var _left = evt.clientX - x;
                        var _top = evt.clientY - y;
                        //console.log(_this,this);
                        
                        dragItem.style.left = _left + "px";
                        dragItem.style.top = _top + "px";
                        
                        return false;
                    }
                    document.onmouseup = function(){
                        //交换位置
                        //拖拽对象放到离它最近的格子上面，离他最近的格子放到拖拽对象原来的位置上（克隆节点的位置）
                        var disArr = [];
                        var newArr = [];
                        for(var i = 0; i < aItems.length-1; i++){
                            var disX = dragItem.offsetLeft - aItems[i].offsetLeft;
                            var disY = dragItem.offsetTop - aItems[i].offsetTop;
                            var dis = Math.sqrt(Math.pow(disX,2)+Math.pow(disY,2));
                            disArr.push(dis);
                            newArr.push(dis);
                        }
                        
                        disArr.sort(function(a,b){
                            return a-b;
                        });
                        
                        var minIndex = newArr.indexOf(disArr[0]);
                        
                        dragItem.style.left = aItems[minIndex].style.left;
                        dragItem.style.top = aItems[minIndex].style.top;
                        aItems[minIndex].style.left = cloneNode.style.left;
                        aItems[minIndex].style.top = cloneNode.style.top;
                    
                        oWrap.removeChild(cloneNode);

                        document.onmouseup = null;
                        document.onmousemove = null;
                    }
                    
                    return false;
                }
            }
            
            
            
        </script>
    </body>
</html>
js九宫格

js九宫格

相关阅读更多精彩内容

友情链接更多精彩内容
