<!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. DWZ富客户端框架使用手册【申明：来源于网络】

    DWZ富客户端框架使用手册[申明:来源于网络] ---- 地址:http://www.docin.com/p-288065388.html&s=C1218A403B04136160905E8E ...

  2. ios学习--iphone 实现下拉菜单

    原文地址:ios学习--iphone 实现下拉菜单作者:sdglyuan00 #import @interface DropDown1 : UIView <</span>UITabl ...

  3. 逆向工程之修改关键CALL返回值_破解视频转换专家

    1)注册软件随便输入注册名注册码 2)进入软件根目录,发送到PEID查壳 3)发现无壳 4)发送到OD 4.1)右键菜单选择智能搜索 4.2)找到关键信息点注册 4.3)找到关键信息点双击进入汇编,向 ...

  4. 二叉查找树，AVL树，伸展树【CH4601普通平衡树】

    最近数据结构刚好看到了伸展树,在想这个东西有什么应用,于是顺便学习一下. 二叉查找树(BST),对于树上的任意一个节点,节点的左子树上的关键字都小于这个节点的关键字,节点的右子树上的关键字都大于这个节 ...

  5. Codeforces 670 - A/B/C/D/E/F - (Done)

    链接:https://codeforces.com/contest/670 A - Holidays - [水] AC代码: #include<bits/stdc++.h> using n ...

  6. Postman 进阶（pre-request scripts&test script）

    Postman 进阶 1. pre-request scripts   pre-request scripts是一个关联了收藏夹内request,并且在发送request之前执行的代码片段.这对于在r ...

  7. npm install的时候出现unexpected end of file错误提示时的解决办法

    运行npm cache clean --force 清空npm缓存即可决这个问题 参考:https://blog.csdn.net/jingtian678/article/details/811876 ...

  8. 点击图片img提交form表单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. mybatis BindingException: Invalid bound statement (not found)

    错误截图 解决措施 此异常的原因是由于mapper接口编译后在同一个目录下没有找到mapper映射文件而出现的. 通常我们在配置SqlSessionFactory时会有如配置 <!-- 配置Sq ...

  10. [转贴] 软件测试职业发展的 A 面和 B 面

    [转贴] 软件测试职业发展的 A 面和 B 面 1.所谓的软件测试技术到底包含什么? 梅子:我先来从传统意义上来谈一下测试技术,主要就是测试分析,测试设计,测试管理,测试执行,自动化测试技术,专项测试 ...