实现这个案例,需要考虑到鼠标的拖拽效果(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. STM32之串口编程步骤

    串口编程步骤(非中断)如下: 使能GPIO时钟 使能串口时钟 配置TXD为复用功能+推挽   (站在STM32芯片角度) 配置RXD为复用功能+上拉   ( 站在STM32芯片角度) 设置数据帧 OV ...

  2. C++_向函数传递对象

    向函数传递对象 1. 使用对象作为函数参数 对象可以作为参数传递给函数,其方法与传递其他类型的数据相同. 在向函数传递对象时,是通过传值调用传递给函数的. 因此,函数中对对象的任何修改均不影响调用该函 ...

  3. svn: E230001: Server SSL certificate verification failed: certificate issued

    svn: E230001: Server SSL certificate verification failed: certificate issued 今天在使用svn时候发现出现这个问题,这个是因 ...

  4. Lucene入门+实现

    Lucene简介详情见:(https://blog.csdn.net/Regan_Hoo/article/details/78802897) lucene实现原理 其实网上很多资料表明了,lucene ...

  5. 设计模式--装饰者模式（io流中使用的模式）

    重点: 1.动态扩展对象,替换之前需要继承才能实现的功能. 2.具体工作的,仍然是被包装的对象,(有点锦上添花的意思,顾名思义仅仅起到装饰的作用,主体不变). 对比继承: 1.减少类的数量. 如果使用 ...

  6. Linux权限管理：setUID、setGID 和 Sticky BIT

    1.setUID.setGID 和 Sticky BIT 的功能详解 setuid 功能: 1.只有可执行的二进制文件程序才能设定 SUID 权限(前提) 2.命令执行者要对该程序有执行(x)权限(必 ...

  7. Tomcat HTTP connector和AJP connector

    Tomcat服务器通过Connector连接器组件与客户程序建立连接,“连接器”表示接收请求并返回响应的端点.即Connector组件负责接收客户的请求,以及把Tomcat服务器的响应结果发送给客户. ...

  8. Java 之 ObjectOutputStream 类

    ObjectOutputStream 类 1.概述 java.io.ObjectOutputStream extends OutputStream ObjectOutputStream:对象的序列化流 ...

  9. LA服务可用性4个9是什么意思？怎么达到？

    SLA:服务等级协议(简称:SLA,全称:service level agreement).是在一定开销下为保障服务的性能和可用性,服务提供商与用户间定义的一种双方认可的协定.通常这个开销是驱动提供服 ...

  10. Mac 下 visual studio code 编辑器 设置为中文

    1,mac系统VScode设置中文 macOS 快捷键:command + shift + p 输入搜索 configure language     1.Ctrl+Shift+P 打开命令 2.搜索 ...