原生JS生成九宫格 / 张生荣

原生JS生成九宫格图片并且实现图片互换，供大家参考，具体内容如下
解题思路

涉及知识点，请
1、熟练利用js做出html样式
2、对onmousedown,onmousemove,onmouseup等事件熟练组合运用
3、熟练掌握事件对象domobj.offsetLeft,domobj.offsetTop,domobj.offsetWidth，domobj.offsetHeight的知识点
4、了解事件 e.clientX,e.clientY,e.offsetX,e.offsetY,e.pageX,e.pageY的知识点
5、理解克隆节点的原理
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #wrap {
            position: relative;
        }
        #wrap div {
            width: 100px;
            height: 100px;
            position: absolute;
            text-align: center;
            line-height: 100px;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="wrap">
    </div>
    <script>
 
        // 1.获取warp
        var wrap = document.querySelector('#wrap')
        
           //2.创建3行3列9个div。并且给每个div添加随机颜色
           //以下为表示构建思路，利用双重for循环
           //(0,0)   (110,0)   (220,0)
           //(0,110)(110,110)(220,110)
           //(0,220)(110,220)(220,220) 
        var count = 0
        var chart = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        for (var i = 0; i < 3; i++) {//行
            for (var j = 0; j < 3; j++) {//列
                var odiv = document.createElement('div');
                wrap.appendChild(odiv);
                //设置top和left值，注意行对应的是odiv.offsetHeight，列对应的是odiv.offsetWidth
                odiv.style.top = i * (odiv.offsetHeight + 10) + 'px';
                odiv.style.left = j * (odiv.offsetWidth + 10) + 'px';
                //获取随机颜色，用的rgb随机获取方式
                odiv.style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256)
                 + ','+ Math.floor(Math.random() * 256) + ')';
                //给每个图片标上号码，i,j最大值为3，但是共执行了9次，设置变量count=0,count++作为数组的索引把对应的内容添加到div上
                odiv.innerText = chart[count++];
            }
        }
    
        //3.获取循环中创建的9个div,并添加点击鼠标事件
        var items = wrap.children
        for (var i = 0; i < items.length; i++) {
            items[i].onmousedown = function (e) {
                var evt = e || event;
                //获取鼠标点下相对于事件源的偏移量
                var x = evt.offsetX;
                var y = evt.offsetY;
                //this指向鼠标点击要拖拽的对象
                var dragitem = this;
                //克隆点击拖拽的对象。注意此时解释可能有点抽象，但是解题关键，克隆对象后相当于除了上述9个事件，
                //又生成了一个隐藏的和点击的div相同的对象，把克隆的对象替换掉刚点击时的即将拖拽的对象，此时拖
                //拽对象被隐藏，脱离父元素，此时需要把拖拽的对象添加到父元素的最后，使其重新为10个子元素，否则拖拽的元素无法显示。
                var clonenode = dragitem.cloneNode();
                wrap.replaceChild(clonenode, dragitem);
                //把拖拽的节点放到wrap的最后
                wrap.appendChild(dragitem);
                //拖拽时把拖拽的层次向上调一下，否则会被覆盖。
                dragitem.style.zIndex = 1;

                //4，此时鼠标点击时需要准备的工作已经做完了，因为拖拽鼠标时，拖拽对象时再文档上移动的，此时鼠标移动的对象应为document
                document.onmousemove = function (e) {
                    var evt = e || event;
                    //获取拖拽对象跟随鼠标时在文档中的定位，事件源据文档的边距-点击时距离事件源的偏移=定位的坐标
                    var x1 = evt.clientX - x;
                    var y1 = evt.clientY - y;
                    dragitem.style.left = x1 + 'px';
                    dragitem.style.top = y1 + 'px';
                    //取消默认行为
                    return false;v
                }
                //5，有拖拽对象的定位，此时需要判断鼠标松开时距离哪个创建的哪个div距离最近，交换其距离。上面提到，此时共创建了10个Div,
                //分别求出拖拽对象和其他10个div的距离传到数组中，找出最小值对应的索引，该索引对应的div即为距离最近的div,然后交换两者的
                //位置（注意：观察数组，最后一个为0，且上面已经把拖拽对象放到最后，是自己和自己比，因此循环时减一即可忽略和自己的比较）
                document.onmouseup = function () {
                    var arr = [];
                    //循环长度-1，忽略和自己的比较
                    for (var j = 0; j < items.length - 1; j++) {
                    //利用勾股定理求距离，并传入数组
                        var disx = dragitem.offsetLeft - items[j].offsetLeft;
                        var disy = dragitem.offsetTop - items[j].offsetTop;
                        var dissum = Math.sqrt(Math.pow(disx, 2) + Math.pow(disy, 2))
                        arr.push(dissum);
                    }
                    //利用展开符...展开数组，用Math.min找出最小值，再用最小值去找出数组对应索引
                    var min = Math.min(...arr);
                    var dex = arr.indexOf(min);
                    //把拖拽对象的定位换成距离最近div的距离
                    dragitem.style.left = items[dex].style.left;
                    dragitem.style.top = items[dex].style.top;
                    //然后把距离最近的div的定位换成此时克隆对象的定位（即原拖拽对象的定位）
                    items[dex].style.left = clonenode.style.left;
                    items[dex].style.top = clonenode.style.top;
                    //此时交换完毕，把克隆节点移除
                    wrap.removeChild(clonenode)
                    //移除事件并取消默认行为
                    document.onmousemove = '';
                    document.onmouseup = '';
                    return false;
                }
            }
        }
    </script>
</body>

</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
原生JS生成九宫格

解题思路

相关推荐

随机推荐
