九宫格，换位置

最新推荐文章于 2020-03-27 14:48:17 发布

cc果冻LXY

最新推荐文章于 2020-03-27 14:48:17 发布

阅读量1.7k

点赞数

分类专栏： js 文章标签：九宫格拖拽

本文链接：https://blog.csdn.net/weixin_44538675/article/details/86545212

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

先布局好，布局不同，js就会不同

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <style type="text/css">
        body{
            margin:0;
            padding:0;
        }
        #wrap{
            position: relative;
        }
        #wrap div{
            position: absolute;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border-radius: 10px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div id="wrap"></div>
    <script>
        var oWrap = document.getElementById("wrap");
        var mt = ml = 10;
        //创建三行三列结构的div;
        for(var i = 0;i<3;i++){//行
            for(var j=0;j<3;j++){//列
                var oDiv = document.createElement("div");
                oWrap.appendChild(oDiv);
                oDiv.style.left = j*(oDiv.offsetWidth+ml)+"px";
                oDiv.style.top = i*(oDiv.offsetHeight+mt)+"px";
                oDiv.style.background = "rgb("+Math.floor(Math.random()*256)+","+
                Math.floor(Math.random()*256)+","+
                Math.floor(Math.random()*256)+")";         
            }
        }
        //在div里 放置内容
        var str = "ABCDEFGHI";
        var aItem = oWrap.children;//div
        for(var i = 0;i<str.length;i++){
            aItem[i].innerHTML = str[i]//字符串里面的索引所对应的内容赋值给对应的div
        }

        //拖拽
        for(var i = 0;i<aItem.length;i++){
            aItem[i].onmousedown = function(e){
                var evt = e|| event;
                //鼠标点下去时候相对于事件源的坐标
                var x = evt.offsetX;
                var y = evt.offsetY;
                var  dragNode = this;//保存鼠标原来的坐标
                //克隆一个被拖拽的那个div
                var cloneNode = dragNode.cloneNode();
                oWrap.replaceChild(cloneNode,dragNode);//替换
                //被替换后，拖拽的那个消失，所以再加一个拖拽的
                oWrap.appendChild(dragNode);
                cloneNode.style.border = "1px dashed red";

                document.onmousemove =function(e){
                    var evt = e|| event;
                    //evt.clientX鼠标移动后距left的可视距离
                    var _left  = evt.clientX-x;
                    var _top  = evt.clientY-y;
                    //拖拽后的坐标
                    dragNode.style.left = _left + "px";
                    dragNode.style.top = _top + "px";
                    return false//阻止鼠标移动的默事件
                }
                document.onmouseup = function(){
                    var disArr = [];//存储所求距离的
                    var newArr = [];
                    for(var i =0;i<aItem.length-1;i++){
                        //
                        var disX = dragNode.offsetLeft - 
                        aItem[i].offsetLeft;
                        var disY = dragNode.offsetTop - 
                        aItem[i].offsetTop;
                        //勾股定理求距离
                        var dis  = Math.sqrt(Math.pow(disX,2)+ Math.pow(disY,2),2)
                        disArr.push(dis);//把求的距离放到disArr中
                       newArr.push(dis);//把求的距离放到disArr中,新增一个一样的数组是为了拖出来的那个和原来的比较                    
                    }
                    //console.log(disArr)

                    disArr.sort(function(a,b){
                        return a-b//从小到大排列
                    })
                    var minNum = disArr[0];
                    var minIndex = newArr.indexOf(minNum)//在没有改变位置的数组中找到最小值的索引；
                   // console.log(minIndex)
                    
                    //交换位置
                    dragNode.style.left = aItem[minIndex].style.left;
                    dragNode.style.top = aItem[minIndex].style.top;
                    aItem[minIndex].style.left= cloneNode.style.left;
                    aItem[minIndex].style.top=cloneNode.style.top;
                    oWrap.removeChild(cloneNode)//移除克隆

                   document.onmousemove = null;//取消鼠标移动
                   document.onmouseup = null;//取消鼠标抬起
                }
             return false
            }
        }
    </script>
</body>
</html>

cc果冻LXY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
九宫格，换位置

先布局好，布局不同，js就会不同 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫

专栏目录