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

    一.安装基本的编译环境 apt-get install build-essential 二.安装MySQL apt-get install mysql-server 三.安装Apache apt-ge ...

  2. javascript 正则表达式(二）

    /* 正则表达式方法:test(),exec(),String对象方法:match(),search(),replace(),split() 1.test()方法: 用法:  regexp对象实例.t ...

  3. java使用ffmpeg和mencoder做视频格式转换

    首发:个人博客,持续更新和纠错 主要使用技术:1)FFmpeg,用于主流格式之间的转换,例如AVI,MP4,FLV等.2)MEncoder,用于奇葩格式转主流格式,例如RMVB转AVI.这样我们可以把 ...

  4. 【和小强学移动app测试2】移动终端app测试点归纳（持续更新）

      以下所有测试最后必须在真机上完整的执行 1.安装.卸载测试 在真机上的以及通过91等第三方的安装与卸载 安装在手机上还是sd卡上 2.启动app测试 3.升级测试 数字签名.升级覆盖安装.下载后手 ...

  5. SoupUI的使用

  6. TI CC2541的GPIO引脚设置.

    P1SEL寄存器, 0xF4, 功能选择用的, 0表示GPIO口, 1表示外设.

  7. Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  8. arm驱动linux异步通知与异步IO【转】

    转自:http://blog.csdn.net/chinazhangzhong123/article/details/51638793 <[ arm驱动] linux异步通知与 异步IO> ...

  9. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件

    习惯上,我们播放一条简短的信息,或向浏览者询问一个问题,都会用到dialog. 创建一个基本的dialog 使用dialog 选项 形式 启用内置动画 给dialog添加按钮 使用dialog回调函数 ...

  10. ImageLoader 图片加裁

    // String picurl = article.cateLogo;// ImageLoader.getInstance().displayImage(picurl, holder.cate_Lo ...