实现这个案例,需要考虑到鼠标的拖拽效果(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实现九宫格拼图的更多相关文章

  1. js版九宫格拼图与启发式搜索（A*算法）

    九宫格拼图游戏大家都很熟悉,这里给大家如介绍何应用状态空间搜索的方式求解拼图的最佳路径和一个游戏dome及自动求解方法: 本文分web版游戏的实现和启发式搜索算法两部分: 先看dome,直接鼠标点击要 ...

  2. 原生js实现九宫格,全解析

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 原生JS实现拼图游戏

    最近无聊,练练原生JS:实现拼图游戏.两种玩法:第一种是单击元素进行交换位置:第二种是拖拽元素进行位置交换.首先需要上传图片并进行回显(需要用到FileReader):下面是部分截图: 可以自行设置切 ...

  4. JS 九宫格算法 用原生js实现

    九宫格算法核心: 利用控件索引index计算出控件所在的行数和列数: 利用控件计算出left距离: 利用控件计算出top距离: 写特效时需要用到定位 公式: 行 row=parseInt(i/cols ...

  5. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  6. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  7. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  8. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  9. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

随机推荐

  1. javascript常用小案例

    常用javascript小案例 样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往 ...

  2. python3快速安装升级pip3

    一.下载地址: 获取get-pip.py安装文件: 官网链接:https://bootstrap.pypa.io/get-pip.py 百度云链接:https://pan.baidu.com/s/14 ...

  3. nginx与PHP编译configure

    configure参数nginx和php是编译安装的关键.记录下来备用: php: ./configure --prefix=/usr/local/php --with-config-file-pat ...

  4. error: snap "eclipse" has "install-snap" change in progress

    在Ubuntu 18.04使用snap安装eclipse软件报时错: inuxidc@linuxidc:~$ snap install --classic eclipse error: snap &q ...

  5. python绘图之turtle库函数的用法

    Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行 ...

  6. POJ3255(Roadblocks)--次短路径

    点这里看题目 3228K 485MS G++ 2453B 根据题意和测试用例知道这是一个求次短路径的题目.次短路径,就是比最短路径长那么一丢丢的路径,而题中又是要求从一点到指定点的次短路径,果断Dij ...

  7. 采集代理ip 地址【西刺，快代理】

    # 嗯,...因为经常需要使用代理去抓一点东西,就有了下面一段代码,第一版不是很好,后面用到了再来优化 import re,pymysql,time,redis from urllib.request ...

  8. Linux/Aix日常报错整理

    [root@localhost ~]# umount /mnt umount.nfs: /mnt: device is busy umount.nfs: /mnt: device is busy 问题 ...

  9. SQL SERVER-修改服务器名称

    --query servername SELECT @@SERVERNAME --alter servername sp_dropserver 'oldname' go sp_addserver 'n ...

  10. CIP 协议安全扫盲