说来惭愧，我一直以为四四方方的拖拽碰撞检测是一个比较容易的事情，后来试过一次，真是让我耗费了无数的脑细胞，原理其实不难，但是具体做起来可就让我很恶心，这可能跟我驾驭的代码数量有关系，我一般也就写半屏幕的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. [转][Automation]- C# SendKey代码表

    使用 SendKeys 将键击和组合键击发送到活动应用程序.此类无法实例化.若要发送一个键击给某个类并立即继续程序流,请使用 Send.若要等待键击启动的任何进程,请使用 SendWait. 每个键都 ...

  2. 编写更少bug的程序的六条准则

          如何编写更少bug的程序?  尽可能避免常见的程序错误.              沟通设计先行 + 编写可复用代码 + 做得更多 + 做的更少 + 创造“编程心流”+ 严格的程序测试   ...

  3. <c:if>条件判断 和 取值做乘法运算

    http://www.yiibai.com/jstl/jstl_core_if_tag.html <td> ${log.etdhHandleTime }<span>  < ...

  4. satis 搭建 Composer 私有库的方法

    安装 satis 命令行下执行: php create-project composer/satis --stability=dev --keep-vcs . 配置 创建 satis.json 文件, ...

  5. php中urlencode与rawurlencode的区别有那些呢

    urlencode 函数: 返回字符串,此字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号(%)后跟两位十六进制数,空格则编码为加号(+).此编码与 WWW 表单 POST 数据的编码 ...

  6. 在Linux下搭建Git服务器的方法是什么样？

    第一步 安装git:可以通过命令的方式快速安装,不同的linux的安装方法可能不一样,我的是采用的yum方法.ubuntu可以用apt-get命令.sudo yum install git 第二步 添 ...

  7. nginx完美支持yii2框架

    nginx完美支持yii2框架 server {listen 80;server_name www.peita.net peita.net;# default_server;access_log /d ...

  8. 浏览器的不兼容,归纳几点html编码要素

    1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1px,下留白3px,op ...

  9. C#：实现托盘（任务栏图标与托盘图标互斥）

    实现托盘(任务栏图标与托盘图标互斥),并且在点击任务栏图标时实现的最小化与点击最小化按钮分离. 具体如下: 1.向窗体上添加如下控件:MenuStrip menuStrip1, NotifyIcon ...

  10. 通达OA 同步中控考勤机 增强版

    如果你用的是中控考勤机且考勤机能联网,那恭喜有福了! 最近发现考勤机提供web方式查询,经过调试可以用程序直接读取考勤机数据跨过考勤机软件及其access数据库,数据同步及时性.可靠性大幅提高. 通达 ...