说来惭愧，我一直以为四四方方的拖拽碰撞检测是一个比较容易的事情，后来试过一次，真是让我耗费了无数的脑细胞，原理其实不难，但是具体做起来可就让我很恶心，这可能跟我驾驭的代码数量有关系，我一般也就写半屏幕的js代码，再多了，我感觉我就受不了，而这个拖拽碰撞真是然我写了好多行，写了将近130行，这才感觉到写代码真塔木德是一件恶心人的事情。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>碰撞检测</title>

<style>

* {

    margin:0;

    padding:0;

}

.c{ background:#9FF; overflow:hidden; padding-bottom:30px; width:550px; margin: 50px auto; position:relative; height:500px;}

.a {

    height:100px;

    width:100px;

    background:#FF9;

    float:left;

    margin:30px 0 0 30px;

}

</style>

</head>

<body>

<div class="c" id="wrap">

  <div class="a">1</div>

  <div class="a">2</div>

  <div class="a">3</div>

  <div class="a">4</div>

  <div class="a">5</div>

  <div class="a">6</div>

  <div class="a">7</div>

  <div class="a">8</div>

  <div class="a">9</div>

  <div class="a">10</div>

  <div class="a">11</div>

  <div class="a">13</div>

</div>

</body>

</html>

<script type="text/javascript">

var o=document.getElementById("wrap");

var arr=o.getElementsByTagName("div");

for(var i=arr.length;i--;i>=0){

    arr[i].style.left=arr[i].offsetLeft+"px";

    arr[i].style.top=arr[i].offsetTop+"px";

    arr[i].style.position="absolute";

    arr[i].style.margin=0;

    m(arr[i])

}

//拖动和各种判断

function m(obj){

    var minD=1000;

    var num=null;

    obj.onmousedown=function(e){

        var aa=[obj.offsetLeft,obj.offsetTop];

        var e=e||event;

        var disX=e.clientX-obj.offsetLeft;

        var disY=e.clientY-obj.offsetTop;

        document.onmousemove=function(e){

            var e=e||event;

            obj.style.left=e.clientX-disX+"px";

            obj.style.top=e.clientY-disY+"px";

            var s=siblings(obj);

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

                if(c(obj,s[i])){

                    if(minD<distance(obj,s[i])){

                        minD=distance(obj,s[i]);

                        num=i;

                    }

                }

            }

        }

        document.onmouseup=function(){

            exchangePosition(obj,siblings(obj)[num],aa);

            document.onmousemove=null;

            document.onmouseup=null;

            }

            return false;

    }

}

function exchangePosition(a,b,x){

    if(b){

        a.style.left=b.offsetLeft+"px";

        a.style.top=b.offsetTop+"px";

        b.style.left=x[0]+"px";

        b.style.top=x[1]+"px";

    }else{

        a.style.left=x[0]+"px";

        a.style.top=x[1]+"px";

    }

}

//求两个Div之间的距离

function distance(x,y,z){

        var l=x.offsetLeft+x.offsetWidth/2;

        var t=x.offsetTop+x.offsetHeight/2;

        var ll=y.offsetLeft+y.offsetWidth/2;

        var tt=y.offsetTop+y.offsetHeight/2;

        var dis=(l-ll)*(l-ll)+(t-tt)*(t-tt);

        return dis

}

//碰撞检测方法

function c(x,y){

    var l=x.offsetLeft;

    var r=l+x.offsetWidth;

    var t=x.offsetTop;

    var b=t+x.offsetHeight;

    var ll=y.offsetLeft;

    var rr=ll+y.offsetWidth;

    var tt=y.offsetTop;

    var bb=tt+y.offsetHeight;

    if(r<ll || b<tt || l>rr || t>bb){

        return false;

    }else{

        return true;

    }

}

function siblings(obj){

    return preall(obj).concat(nextall(obj))

}

function preall(obj){

    var arr=[];

    var o=obj.previousSibling;

    while(o){

        if(o.nodeType==1){

            arr.unshift(o);

        }

        o=o.previousSibling;

    }

    return arr;

}

function nextall(obj){

    var arr=[];

    var o=obj.nextSibling;

    while(o){

        if(o.nodeType==1){

            arr.push(o);

        }

        o=o.nextSibling;

    }

    return arr;

}

</script>

js九宫格的碰撞检测的更多相关文章

  1. JS 九宫格算法 用原生js实现

    九宫格算法核心: 利用控件索引index计算出控件所在的行数和列数: 利用控件计算出left距离: 利用控件计算出top距离: 写特效时需要用到定位 公式: 行 row=parseInt(i/cols ...

  2. javascript九宫格碰撞检测

      JS九宫格碰撞检测这个东西 以前学过  这次主要是做面试项目web版的win10 桌面图片需要用碰撞检测 再写的时候竟然完全忘记了碰撞检测原理 和怎么写 综合来说还是写的太少  今天再学了一下 理 ...

  3. javascript中矩形的碰撞检测---- 计算碰撞部分的面积

    今天在做一个拖拽改变元素排序的东西的时候,在做被拖动元素同时碰撞到两个元素时,究竟应该与哪个元素交换位置的问题上,纠结到崩溃,实在是想不到别的办法去做了,只能去想办法计算碰撞的面积. 这应该不是最合适 ...

  4. js实现小球的弹性碰撞。

      前  言 MYBG 小编最近在做自己的个人网站,其中就用到了一个小球碰撞检测的功能,想自己写,无奈本人能力不足啊(毕竟还是一个菜鸟)!!就想着找个插件用一下也好,可是找了好久也没有找到一个比较好用 ...

  5. Web3D编程入门总结——面向对象的基础Web3D框架

    本篇主要通过分析Tony Parisi的sim.js库(原版代码托管于:https://github.com/tparisi/WebGLBook/tree/master/sim),总结基础Web3D框 ...

  6. js仿手机端九宫格登录功能

    js仿手机端九宫格登录功能 最近闲来无事把以前无聊时开发的小东西拿出来和大家分享下,写的不好的请指出,我会及时修改.谢谢. 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说 ...

  7. js版九宫格拼图与启发式搜索（A*算法）

    九宫格拼图游戏大家都很熟悉,这里给大家如介绍何应用状态空间搜索的方式求解拼图的最佳路径和一个游戏dome及自动求解方法: 本文分web版游戏的实现和启发式搜索算法两部分: 先看dome,直接鼠标点击要 ...

  8. CSS3_元素拖曳原理_设置全局点击捕获_九宫格碰撞检测_自定义滚动条

    拖曳原理: 元素的初始位置 + 鼠标距离差 = 元素最终位置 使元素可以拖动 function dragElement(obj){ obj.onmousedown = function(e){ e = ...

  9. 利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 夺命雷公狗---2016-linux---3之目录一般作用

    最好文件还是存放在自己的home目录下 建议:在很多时候如果需要系统备份最好去备份boot和etc这两个目录

  2. [CentOS] 打造vim环境

    安装vim yum install vim-enhanced 安装git rpm -Uvh http://mirrors.ustc.edu.cn/fedora/epel/6/x86_64/epel-r ...

  3. java 网络编程（一）---基础知识和概念了解

    java 为用户提供了十分完善的网络功能: 1. 获取网络上的各种资源(URL) 2. 与服务器建立连接和通信(ServerSocket和Socket) 3. 无连接传递本地数据(DatagramSo ...

  4. OpenStack collectd的从零安装服务端

    安装collectd包操作同客户端相同,不在赘述 配置文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2 ...

  5. OpenStack 界面开发中response.body的中文编码问题

    Contents [hide] 1 问题的引入= 1.1 解决办法 2 用户限制输入中文 3 不限制用户输入,呈现上修改 问题的引入= G在我们创建虚拟机的时候,会设置虚拟机的名称,描述,如果没有限制 ...

  6. SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]

    SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数   --创建表格 create table aa ( UserName varchar(50 ...

  7. JVM参数配置的线上教训

    原来规则处理业务五十台服务器经常大量fgc,load飙高,我修改了jvm配置后,五十台服务器十多天没有任何异常,双十一中轻闲度过. 可是今天突然又有一台大量fgc,load飙高.分析了半天,回头一看, ...

  8. android 学习随笔十五（Activity的生命周期与摧毁时返回数据 ）

    1.Activity的生命周期 onCreate:创建时调用 onStart:在屏幕上可见,但是还没有获得焦点 onResume:可见并且获得焦点 onPause:可见,但是失去焦点 onStop:不 ...

  9. Spring 复习笔记01

    Spring 框架 1. core:整个Spring框架构建在Core核心模块上,它是整个框架的的基础. 2. AOP:AOP模块提供了一个轻便但功能强大强大的AOP框架,让我们可以以AOP的形式增强 ...

  10. FastJson--阿里巴巴公司开源的速度最快的Json和对象转换工具(转)

    本文转自:http://blog.csdn.net/djun100/article/details/24237371 这是关于FastJson的一个使用Demo,在Java环境下验证的 class U ...