实现这个案例,需要考虑到鼠标的拖拽效果(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. 《Mysql - 如何恢复和避免误删除？》

    一:误删数据 (如何恢复和避免误删除) - 使用 delete 语句误删数据行: - 使用 drop table 或者 truncate table 语句误删数据表: - 使用 drop databa ...

  2. 利用Python进行数据分析 第5章 pandas入门（1）

    pandas库,含有使数据清洗和分析工作变得更快更简单的数据结构和操作工具.pandas是基于NumPy数组构建. pandas常结合数值计算工具NumPy和SciPy.分析库statsmodels和 ...

  3. Hibernate持久化，生命周期

    一 .生命周期   1.1  . 说明 持久化类就是我们所说的实体类,实体类(持久化类)对象是有状态的. 为什么实体类对象会有状态? 答:由于HIbernate框架是一个先映射,后操作的框架.所谓的状 ...

  4. my linux cmd

    常用的linux命令 一.vi yy 复制当前行 u 撤销 p 粘贴 dd 删除当前行 set nu 显示行号 gg 首行 G 末行 二.用户管理相关 useradd 添加用户   (默认创建一个与用 ...

  5. K380键盘IOS使用

  6. POJ1611(The Suspects)--简单并查集

    题目在这里 关于SARS病毒传染的问题.在同一个组的学生是接触很近的,后面也会有新的同学的加入.其中有一位同学感染SARS,那么该组的所有同学得了SARS.要计算出有多少位学生感染SARS了.编号为0 ...

  7. stm32 SPI-FLASH W25Q64

    The W25Q64BV array is organized into 32,768 programmable pages of 256-bytes each. Up to 256 bytes ca ...

  8. 碰撞器Colider 触发器

    碰撞器可以让所依附的游戏物件对其他碰撞体产生碰撞行为(其他游戏物体必须具有Rigidbody组件) 对于不规则形状的物体,通常使用组合式碰撞体而不是网格碰撞器,以为网格碰撞器以模型的网格为基础,更为复 ...

  9. 如何使用python自定义命令

    dir.tree.cd等等,都是我们常见的命令.这些命令是开发者开发出来的,如果我们自己想按照自己的想法开发一个命令,应该怎么做呢? 以python语言来实现,问题就是:如何使用python自定义命令 ...

  10. javascript_05-操作符

    一元运算符 a++和++a //5 2 3 var a =1; var b = ++a + ++a; console.log(b) //4 1 3 var a =1; var b = a++ + ++ ...