实现这个案例,需要考虑到鼠标的拖拽效果(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. windows 下搭建go开发环境

    下载golang安装包: 步骤一: 先打开环境变量配置的界面 步骤二;配置我们的环境变量 对上图的一个说明: 1).path这个变量不需要再创建,因为系统本就有,在后面添加即可. 2).增加Go的bi ...

  2. git彻底删除或变更子模块

    今天遇到一个很怪的问题,我想把我的一个子模块切换到另一个上游,我按照网上的方法删除子模块然后新建后,这个子模块依旧跟踪着我先前的上游.自己摸索了一下,可能方法比较傻,不过是可行的,希望能给大家一些帮助 ...

  3. Spring Cloud Alibaba学习笔记（5） - 整合Sentinel及Sentinel规则

    整合Sentinel 应用整合Sentinel 在dependencies中添加依赖,即可整合Sentinel <dependency> <groupId>com.alibab ...

  4. hdu 2822 ~！！！！！！坑死我

    首先 在此哀悼...  为我逝去的时间哀悼...  每一步都确定再去写下一步吧...日狗 不过还是有点收获的..  对优先队列的使用 有了进一步的理解 先上代码 #include<iostrea ...

  5. 在论坛中出现的比较难的sql问题：36(动态行转列 解析json格式字符串)

    原文:在论坛中出现的比较难的sql问题:36(动态行转列 解析json格式字符串) 所以,觉得有必要记录下来,这样以后再次碰到这类问题,也能从中获取解答的思路.

  6. java利用反射打印出类的结构

    1 输入一个类名:java.lang.String将打印出String类定义的结构,例如: public final class java.lang.String { public java.lang ...

  7. HANA数据库无法停止

    Symptom: 使用命令HDB stop多次,每次报错为timeout ----------------------- sdpadm@PRDDB01:/usr/sap/SDP/HDB66/prder ...

  8. 使用SAP Leonardo上的机器学习服务提取图片的特征向量

    要想提取图片的特征向量,首先得知道特征向量是什么. 我们假设这样一个服务场景,技师上门维修某设备,发现上面某零件损坏了,假设这位技师由于种种原因,没能根据自己的经验识别出这个零件的型号.此时技师掏出自 ...

  9. MongoDB官方推荐的GUI工具-Compass的使用

    探索和操作MongoDB数据的最简单方法 用于MongoDB的GUI.可视化地查看数据.以秒为单位运行临时查询.使用完整的CRUD功能与数据交互.查看和优化查询性能.可在Linux.Mac或Windo ...

  10. List集合和Set集合互转

    List集合转成Set集合(如果List集合的元素有重复,转成Set集合就会去掉重复的数据,每条数据只保留一条) //List转化成Set List<String> list = new ...