<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>九宫格</title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            ul{

                width: 320px;

                height: 320px;

                position: relative;

                left: 300px;

                top: 100px;

                border: 1px solid red;

            }

            li{

                list-style: none;

                position: absolute;

                width: 100px;

                text-align: center;

                line-height: 100px;

                font-size: 18px;

                height: 100px;

                user-select: none;

            }

        </style>

    </head>

    <body>

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

        <script type="text/javascript">

            var oUl=document.querySelector("ul");//获取第一个ul的dom

            var aLis=document.querySelectorAll("li");//获取所有的li

            var lt=mt=;//margin左和margin右值

            function RandColor(){

                return Math.floor(Math.random()*);//定义一个函数返回一个0-255之间的值

            }

            for(var i=;i<aLis.length;i++){

                aLis[i].style.left=(i%)*(+lt)+"px";//通过取余运算对列排列

                aLis[i].style.top=Math.floor(i/)*(+mt)+"px";//通过向下取整进行行排列

                aLis[i].style.backgroundColor="rgb("+RandColor()+","+RandColor()+","+RandColor()+")";//背景色

                aLis[i].innerText=i+;//li内的内容填充

                aLis[i].onmousedown=function(e){//添加事件

                    var evt=e||event;

                    var dragNode=this;//把DOM对象(this)赋给dragNode,因为this指向问题,需要保存this

                    var cloneNode=dragNode.cloneNode();//克隆一个元素留在原地

                    dragNode.style.zIndex=;//拖拽时置于顶部

                    dragNode.style.border="2px solid black";//突出样式

                    oUl.replaceChild(cloneNode,dragNode);//把拖拽节点换成克隆节点

                    oUl.appendChild(dragNode);//把拖拽节点放到oUl尾部

                    var x=evt.offsetX;//鼠标在事件源的位置

                    var y=evt.offsetY;//鼠标在事件源的位置

                    document.onmousemove=function(e){

                        var evt=e||event;

                        var _x=evt.clientX-x-oUl.offsetLeft;//求坐标

                        var _y=evt.clientY-y-oUl.offsetTop;

                        _x=_x< ?  : _x>oUl.offsetWidth- ? oUl.offsetWidth- : _x;

                        _y=_y< ?  : _y>oUl.offsetHeight- ? oUl.offsetHeight- : _y;

                        dragNode.style.left=_x+"px";

                        dragNode.style.top=_y+"px";

                    }

                    document.onmouseup=function(){

                        var arr=[];//定义空数组用来存放dragNode每一个兄弟元素的坐标

                        aLis=oUl.children;

                        for(var i=;i<aLis.length-;i++){//开始存放

                            arr.push({left:aLis[i].offsetLeft,top:aLis[i].offsetTop})

                        }

                        var _x=dragNode.offsetLeft;

                        var _y=dragNode.offsetTop;

                        var resurt=[];//定义一个空的结果数组

                        var num=Infinity;//定义一个值用来保存结果的最小值

                        arr.forEach(function(item){

                            resurt.push(Math.sqrt(Math.pow(Math.abs(_x-item.left),)+Math.pow(Math.abs(_y-item.top),)));

                            if(num>Math.sqrt(Math.pow(Math.abs(_x-item.left),)+Math.pow(Math.abs(_y-item.top),))){

                                num=Math.sqrt(Math.pow(Math.abs(_x-item.left),)+Math.pow(Math.abs(_y-item.top),));

                            }

                        })

                        num=resurt.indexOf(num);//把resurt数组中的最小值的索引赋给num

                        //交换位置

                        dragNode.style.left=aLis[num].style.left;

                        dragNode.style.top=aLis[num].style.top;

                        aLis[num].style.left=cloneNode.style.left;

                        aLis[num].style.top=cloneNode.style.top;

                        //回置样式

                        dragNode.style.zIndex=;

                        dragNode.style.border="none";

                        oUl.removeChild(cloneNode);

                        document.onmouseup=null;

                        document.onmousemove=null;

                    }

                }

            }

        </script>

    </body>

</html>

原生js实现九宫格,全解析的更多相关文章

  1. 【CSS进阶】原生JS getComputedStyle等方法解析

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  2. 原生js的联动全选

    开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...

  3. 原生js 异步请求,responseXML解析

    异步更新原理:用XMLHTTP发送请求得到服务器端应答数据,在不重新载入整个页面的情况下,用js操作Dom最终更新页面1.创建XMLHttp请求协议 function createXMLHttpReq ...

  4. 原生JS实现购物车全选多选按钮功能

    对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table ...

  5. JS回调函数全解析教程

    转自:http://blog.csdn.net/lulei9876/article/details/8494337 自学jQuery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速g ...

  6. 原生js中实现全选和反选功能

    <!DOCTYPE html>      <html>      <head lang="en">          <meta char ...

  7. JS回调函数全解析教程（callback）

    自学jQuery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速google之,发现原来中文翻译成回调.也就是回调函数了.不懂啊,于是在google回调函数,发现网上的中文解释实在是 ...

  8. 原生JS实现九宫格拼图

    实现这个案例,需要考虑到鼠标的拖拽效果(onmousedown/onmousemove/mouseup) 拖拽分解: 按下鼠标---->移动鼠标----->松开鼠标 1.给目标元素添加on ...

  9. 5大最新云原生镜像构建工具全解析，3个来自Google，你了解几个？

    1云原生大背景下的镜像构建在分享开始,我想先跟大家简单聊一下云原生,可能不会详细展开,而是带领大家了解一下云原生对镜像构建方面的影响.第一,在接触云原生相关的技术时,无论是要解决开发.测试环境的问题, ...

随机推荐

  1. Web 端自动化测试

    一.环境搭建 准备工具如下:下载 python[python 开发环境](http://python.org/getit/) 下载setuptools: [python 的基础包工具](http:// ...

  2. javascript的数组之sort()

    sort()方法用in-place的算法对原数组进行排序,但不会产生新的数组.这个方法不是一个稳定的排序,默认采用的是安字符串Unicode码点进行排序的. let fruit =  ['cherri ...

  3. matlab知识

    matlab中cumsum函数通常用于计算一个数组各行的累加值. 调用格式及说明 matlab中cumsum函数通常用于计算一个数组各行的累加值.在matlab的命令窗口中输入doc cumsum或者 ...

  4. Luogu 1093 - 奖学金 - [排序水题]

    题目链接:https://www.luogu.org/problemnew/show/P1093 题目描述某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金.期末,每个学生 ...

  5. Docker数据卷

    1.volume操作命名:docker volume Usage:    docker volume COMMAND Manage Docker volumes Options:       --he ...

  6. 项目实战：负载均衡集群企业级应用实战—LVS详解

    目录 一.负载均衡集群介绍 二.lvs 的介绍 三.LVS负载均衡四种工作模式 1.NAT工作模式 2.DR工作模式 3.TUN工作模式 4.full-nat 工作模式 5.四者的区别 四.LVS i ...

  7. cestos7安装zookeeper

    zookeeper安装包下载地址http://archive.apache.org/dist/zookeeper/ 一.单机 在/usr目录下 curl -L-O http://archive.apa ...

  8. spring 事务注解

    在spring中使用事务需要遵守一些规范和了解一些坑点,别想当然.列举一下一些注意点. 在需要事务管理的地方加@Transactional 注解.@Transactional 注解可以被应用于接口定义 ...

  9. spring-boot 速成(2) devtools之热部署及LiveReload

    JRebel热部署插件相信很多人都知道,但是这是一款商业插件,spring-boot框架也提供了类似的功能,即:devtools,关键是免费的! 使用方法如下: 一.添加 devtools依赖 dep ...

  10. VMWare安装CentOS 6.5图解

    1.本安装示例所使用的虚拟机:vmware workstation 12 2.从VMWare创建虚拟机开始,打开VMWare. 操作系统:CentOS 6.5 64位 IP地址:192.168.1.2 ...