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

    PDO的知识点标注在代码里 <?php //造DSN:驱动名:dbname=数据库名:host=服务器地址 $dsn="mysql:dbname=mydb;host=localhost ...

  2. 用VS2010编C#程序扫盲

    0. Properties文件夹 定义你程序集的属性 项目属性文件夹 一般只有一个 AssemblyInfo.cs 类文件,用于保存程序集的信息,如名称,版本等,这些信息一般与项目属性面板中的数据对应 ...

  3. Server编解码 解决Response.Redirect方法传递汉字丢失或乱码

  4. fork系统调用（转载）

    (1) fork系统调用说明 fork系统调用用于从已存在进程中创建一个新进程,新进程称为子进程,而原进程称为父进程.fork调用一次,返回两次,这两个返回分别带回它们各自的返回值,其中在父进程中的返 ...

  5. WM_SIZE

    procedure WMSize (var Message: TWMSize); message WM_SIZE; 参数说明 wParam: Specifies the type of resizin ...

  6. linux-exp 工具+小技巧

    # 工具篇 # pwntools ,gdb-peda ROPgadget-tool . EDB ## pwntools获取.安装和文档帮助 ## - pwntools: github可以搜索到 htt ...

  7. Delphi的DateToStr StrToDate格式灵活用法

    Delphi的DateToStr StrToDate格式灵活用法 2008-04-09 10:19 procedure TForm1.Button1Click(Sender: TObject);var ...

  8. Backup: Numbers in Perl6

    Perl6 is a new language, not a improved version of Perl5. Perl6 inherits many good features from man ...

  9. Linux驱动学习笔记（6）信号量（semaphore）与互斥量（mutex）【转】

    转自:http://blog.chinaunix.net/uid-24943863-id-3193530.html 并发导致竟态,从而导致对共享数据的非控制访问,产生非预期结果,我们要避免竟态的发生. ...

  10. Base Enum Properties [AX 2012]

    Base Enum Properties [AX 2012] This topic has not yet been rated - Rate this topic Updated: December ...