<!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. Solve Docker for Windows error: docker detected, A firewall is blocking file Sharing between Windows and the containers

    被这个“分享硬盘”问题烦了我好几个小时,终于在一个叫Marco Mansi外国人博客上找到解决方法了,真的很无奈 https://blog.olandese.nl/2017/05/03/solve-d ...

  2. [LeetCode] Majority Element 求大多数

    Given an array of size n, find the majority element. The majority element is the element that appear ...

  3. PHP中通过bypass disable functions执行系统命令的几种方式

    原文:http://www.freebuf.com/articles/web/169156.html 一.为什么要bypass disable functions 为了安全起见,很多运维人员会禁用PH ...

  4. json转换学习

    文章部分代码实体类可以忽略. 原文:https://www.cnblogs.com/free-dom/p/5801866.html 代码如下: package covert; import java. ...

  5. itoa()函数

    itoa()函数 itoa():char *itoa( int value, char *string,int radix); 原型说明: value:欲转换的数据.string:目标字符串的地址.r ...

  6. Gym 101981G - Pyramid - [打表找规律][2018-2019 ACM-ICPC Asia Nanjing Regional Contest Problem G]

    题目链接:http://codeforces.com/gym/101981/attachments The use of the triangle in the New Age practices s ...

  7. POJ 2689 - Prime Distance - [埃筛]

    题目链接:http://poj.org/problem?id=2689 Time Limit: 1000MS Memory Limit: 65536K Description The branch o ...

  8. [iptables] 如何用iptables管理桥接模式下的设备

    场景:qemu虚拟机通过tap设备与host的物理网卡通过bridge桥接上网. 如下: [root@host100 ~]# brctl show bridge name bridge id STP ...

  9. Oracle 数据库逻辑结构.md

    一.存储关系Oracle 数据库逻辑上是由一个或多个表空间组成的,表空间物理上是由一个或多个数据文件组成的:而在逻辑上表空间又是由一个或多个段组成的.在Oracle 数据库中,通过为每种不同的数据对象 ...

  10. PHP 二位数组按照下标排序

    1.排序得内容 array(6) { [0] => array(12) { [0] => string(3) "160" [1] => string(2) &qu ...