<!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. python __get__ & __set__

    目的:  提供类似java中的getter/setter的东西. (getter/setter的目的: 将属性方法化,使得属性的引用变得简单---尤其将来属性的读取/赋值有比较复杂的逻辑) 官方简明文 ...

  2. GBDT 详解分析 转+整理

    GBDT DT 回归树 Regression Decision Tree 梯度迭代 GBDT工作过程实例 需要解释的三个问题 - 既然图1和图2 最终效果相同,为何还需要GBDT呢? - Gradie ...

  3. gitlab-ci + k8s 之docker （三）

    docker 在本系列(一)中(https://www.cnblogs.com/huandada/p/9965771.html)的runner_tomcat.sh脚本有涉及到镜像的推送,本文主要记录整 ...

  4. oracle 28000错误解决方法

    ORA-28000: the account is locked-的解决办法 ORA-28000: the account is locked 第一步:使用PL/SQL,登录名为system,数据库名 ...

  5. Ubuntu12.04下解决sudo apt-get update警告Duplicate sources.list entry

    sudo apt-get update,会提示如下警告: W: Duplicate sources.list entry http://archive.canonical.com/ubuntu/ pr ...

  6. java开发mis系统所需技术及其作用

    MIS(管理信息系统--Management Information System)系统 ,是一个由人.计算机及其他外围设备等组成的能进行信息的收集.传递.存贮.加工.维护和使用的系统. 是一门新兴的 ...

  7. Hyper-v带宽限制以及验证工具

    最近在做项目的性能测试时,需要模拟网络的带宽来控制文件的上传速度.按照以前的方式方法,我们一般会使用工具 softperfect bandwidth manager 来模拟上下行的带宽. 官网地址 h ...

  8. InnoDB中锁的算法(3)

    Ⅰ.隐式锁vs显示锁 session1: (root@localhost) [test]> show variables like 'tx_isolation'; +-------------- ...

  9. Chrome扩展程序——TabCopy：一键复制网页标题和网址

    Chrome扩展程序——TabCopy:一键复制网页标题和网址 - Erik_ly的博客 - CSDN博客 https://blog.csdn.net/u012318074/article/detai ...

  10. java八大数据类型

    基本数据类型以值传递的方式进行传递,String以值传递的方式传递,其他的以地址的方式进行传递 分别是:byte  short  int  long  float  double char boole ...