原生JS实现九宫格拼图

实现这个案例,需要考虑到鼠标的拖拽效果(onmousedown/onmousemove/mouseup)

拖拽分解:

　　按下鼠标---->移动鼠标----->松开鼠标

1.给目标元素添加onmousedown事件,拖拽的前提是在目标元素按下鼠标左键

2.当onmousedown事件发生后,此刻给document添加onmousemove事件,意味着此刻鼠标在网页的移动都将改变元素的位置

3.在onmousemove事件中,设定目标元素的left和top

　　公式:

　　　　目标元素的left = 鼠标的clienX - (鼠标和元素的横坐标差,即offsetX)

　　　　目标元素的top = 鼠标的clientY -(鼠标和元素的纵坐标差,即offsetY)

4.当onmousedown发生以后,此刻给document添加onmouseup事件,意味着此刻鼠标在网页的任意位置松开鼠标,都会放弃拖拽效果,在onmouseup事件中,取消document的onmousemove事件即可

当然这个小案例也用到了关于DOM元素系列的操作,对于新手而言,算一个很好的综合训练

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>九宫格</title>
    <style>
        #box {
            height: 300px;
            width: 300px;
            position: relative;
            background-color: brown;
            margin: 10px auto;
        }

        span {
            width: 100px;
            height: 100px;
            position: absolute;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            color: #FFF;
            user-select: none;
            cursor: pointer;
            font-weight: bolder;
        }

        #one {
            top: 0;
            left: 0;
            background: url(./5.jpg);
            background-size: 100% 100%;
        }

        #two {
            top: 0;
            left: 100px;
            background: url(./7.jpg);
            background-size: 100% 100%;
        }

        #three {
            top: 0;
            left: 200px;
            background: url(./9.jpg);
            background-size: 100% 100%;
        }

        #four {
            top: 100px;
            left: 0;
            background: url(./1.jpg);
            background-size: 100% 100%;
        }

        #five {
            top: 100px;
            left: 100px;
            background: url(./2.jpg);
            background-size: 100% 100%;
        }

        #six {
            top: 100px;
            left: 200px;
            background: url(./4.jpg);
            background-size: 100% 100%;
        }

        #seven {
            top: 200px;
            left: 0;
            background: url(./3.jpg);
            background-size: 100% 100%;
        }

        #eight {
            top: 200px;
            left: 100px;
            background: url(./6.jpg);
            background-size: 100% 100%;
        }

        #nine {
            top: 200px;
            left: 200px;
            background: url(./8.jpg);
            background-size: 100% 100%;
        }

        #box .cBox {
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">
        <span id="one"></span>
        <span id="two"></span>
        <span id="three"></span>
        <span id="four"></span>
        <span id="five"></span>
        <span id="six"></span>
        <span id="seven"></span>
        <span id="eight"></span>
        <span id="nine"></span>
    </div>
</body>
<script>
    var oBox = document.getElementById("box")
    var box = document.querySelectorAll("span");

    function Box(boxName) {
        boxName.onmousedown = function (eve) {
            var e = eve || window.event;
            var cSpan = document.createElement("span");
            cSpan.style.background = getComputedStyle(boxName).background;
            cSpan.style.top = boxName.offsetTop + "px";
            cSpan.style.left = boxName.offsetLeft + "px";
            cSpan.className = "cBox"
            oBox.appendChild(cSpan)
            var offsetX = e.pageX - cSpan.offsetLeft;
            var offsetY = e.pageY - cSpan.offsetTop;
            document.onmousemove = function (eve) {
                var e = eve || window.event;
                cSpan.style.left = e.pageX - offsetX + "px";
                cSpan.style.top = e.pageY - offsetY + "px";
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                var spans = oBox.getElementsByTagName("span")
                var minSpan = null;
                var min = 1000;
                for (var i = 0; i < spans.length - 1; i++) {
                    var span = spans[i];
                    var dis = distance(cSpan, span);
                    if (dis <= min) {
                        min = dis;
                        minSpan = span;
                    }
                }
                var lsColor = getComputedStyle(minSpan).background;
                minSpan.style.background = getComputedStyle(boxName).background;
                boxName.style.background = lsColor;
                oBox.removeChild(cSpan);
                document.onmouseup = null;
            }
            return false;
        }
    }

    function distance(span1, span2) {
        var a = span1.offsetLeft - span2.offsetLeft;
        var b = span1.offsetTop - span2.offsetTop;
        var c = Math.sqrt(a * a + b * b);
        return c;
    }
    for (var i = 0; i < box.length; i++) {
        Box(box[i]);
    }
</script>
</html>

ps:案例中的图片没有办法上传,想要的同学可以自行百度

完整效果:

原生JS实现九宫格拼图

猜你喜欢