<!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. D2

    Cosmic Cleaner: 为什么大家都知道球缺怎么求,我没听说过啊??? 我真的是印象里今天第一次听说球缺这个东西啊... 我一看,哇,神仙几何题,毫无头绪,投了投了,然后就被过穿了??? tl ...

  2. Java 读取某文件下的所有文件的大小 并将所有文件的文件名，以及对应大小输出在xls表格里

    import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.In ...

  3. 概率DP求解例题

    1,逆推状态:山东省赛2013年I题 Problem I: The number of steps Description Mary stands in a strange maze, the maz ...

  4. PAT甲级1141 Ranking of Institutions

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805344222429184 题意: 给定几个学生的PAT分数和学校 ...

  5. Xcode工程编译错误之iOS开发之Xcode9报错 Compiling IB documents for earlier than iOS7 is no longer supported.

    概要: 在我们升级到Xcode9时,最低的编译版本为iOS8,但是在使用一些SDK的时候就会报出Compiling IB documents for earlier than iOS7 is no l ...

  6. ionic3.x版本-实现点击tab导航栏判断是否已经登陆然后加载不同页面，和退出登录功能。

    html代码: <ion-tabs #myTabs> <ion-tab [root]="tab1Root" tabTitle="首页" tab ...

  7. vue:不同环境配置不同打包命令

    修改prod.env.js 'use strict'const target = process.env.npm_lifecycle_event;if (target == 'build') { // ...

  8. python 当前时间多加一天、一小时、一分钟

    datetime模块 import datetime # 获取当前时间 print(datetime.datetime.now()) # 2017-07-15 15:01:24.619000 # 格式 ...

  9. python tkinter Label

    """小白随笔,大佬勿喷""" #Label标签 用于可显示文本或图片,不可编辑 import tkinter as tk #初始化窗口 w ...

  10. java之项目构建工具Gradle

    介绍 Java 作为一门世界级主流编程语言,有一款高效易用的项目管理工具是 java 开发者共同追求的心愿和目标.显示 2000 年的 Ant,后有 2004 年的 Maven 两个工具的诞生,都在 ...