最短距离求错了,还待改正,先记录下来再说

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>可拖拽的照片墙</title>
<style type="text/css">
html body {
    margin:0;
}
#wrap {
    list-style:none;
    padding:0;
    margin:30px auto;
    width:670px;
    position:relative;
    zoom:1;
}
.clearfix:after {
    content:‘‘;
    height:0;
    clear:both;
    display:block;
    visibility:hidden;
}
#wrap div{
    float:left;
    margin:10px;
    z-index:1;
    border:1px solid #fff;
}
#wrap div img{
    width:200px;
    height:150px;
    vertical-align:bottom;
}
#wrap div.active {
    border:1px dashed red;
}
</style>
</head>
<body>
<div id="wrap" class=‘clearfix‘>
  <div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/1.jpg" /></div>
  <div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/2.jpg" /></div>
  <div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/3.jpg" /></div>
  <div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/4.jpg" /></div>
  <div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/5.jpg" /></div>
  <div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/6.jpg" /></div>
  <div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/7.jpg" /></div>
  <div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/8.jpg" /></div>
  <div><img src="http://pingfan1990.sinaapp.com/javacript/dargimg/9.jpg" /></div>
</div>
<script type="text/javascript">
var o=document.getElementById("wrap");
var arr=o.getElementsByTagName("div");
var ind=2;
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=999999;
    var num=-1;
    obj.onmousedown=function(e){
        var e=e||event;
        ind++;
        var aa=[obj.offsetLeft,obj.offsetTop];
        var disX=e.clientX-obj.offsetLeft;
        var disY=e.clientY-obj.offsetTop;
        this.style.zIndex=ind;

        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])){

                    var dis=distance(obj,s[i]);
                    if(mind>dis){
                        mind=dis;
                        num=i;
                    }
                    s[i].className="active";
                }else{
                    num=-1;
                    s[i].className="";
                }
            }

        }

        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){
        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=Math.sqrt((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>
时间: 2024-10-27 12:04:57

最短距离求错了,还待改正,先记录下来再说的相关文章

数据库存数据时,逻辑上防重了为啥还会出现重复记录?

在很多异常情况下,比如高并发.网络糟糕的时候,数据库里偶尔会出现重复的记录. 假如现在有一张书籍表,结构类似这样 +----+--------------+ | id | name | +----+--------------+ | 1 | 世界简史 | +----+--------------+ 在异常情况下,可能会出现下面这样的记录 +----+--------------+ | id | name | +----+--------------+ | 1 | 世界简史 | | 2 | 人类简

【palindrome partitioning II】cpp

题目: Given a string s, partition s such that every substring of the partition is a palindrome. Return the minimum cuts needed for a palindrome partitioning of s. For example, given s = "aab",Return 1 since the palindrome partitioning ["aa&qu

求无向连通图的割点

求一个连通图的割点,割点的定义是,如果除去此节点和与其相关的边,图不再连通. 连通图的定义:如果图中任意两点都是连通的,那么图被称作连通图.如果此图是有向图,则称为强连通图(注意:需要双向都有路径) 割点:在无向连通图中,删除一个顶点v及其相连的边后,原图从一个连通分量变成了两个或多个连通分量,则称顶点v为割点,同时也称关节点 (Articulation Point).多连通图没有割点,若在多连通图上至少删去k个顶点才能破坏图的连通性,则称此图为k连通图.貌似有向连通图没有割点这个说法. 连通分

表达式求值:从“加减”到“带括号的加减乘除”的实践过程

本文乃Siliphen原创,转载请注明出处:http://blog.csdn.net/stevenkylelee ● 为什么想做一个表达式求值的程序 最近有一个需求,策划想设置游戏关卡的某些数值,这个数值不是一个常量,而是根据关卡的某些环境数据套上一个计算表达式算出来的.这个需求无法用excel拖表预计算出,因为关卡的环境数据只有在游戏中才能产生,在excel制表时,这些都是未知的.作为程序员,我可以把计算表达式硬编码在代码中,但这个做法有缺陷,如果策划要修改计算表达式的话,只能通过我修改程序并

子界类型、集合类型、记录类型、文件类型

子界类型 如果我们定义一个变量i为integer类型,那么i的值在微型机系统的pascal中,使用2字节的定义表示法,取值范围为-32768-32767.而事实上,每个程序中所用的变量的值都有一个确定的范围. 例如,人的年龄一般不超过150,一个班级的学生不超过100人,一年中的月数不超过12,一月中的天数不超过31,等等. 如果我们能在程序中对所用的变量的值域作具体规定的话,就便于检查出那些不合法的数据,这就能更好地保证程序运行的正确性.而且在一定程度上还会节省内存空间. 子界类型就很好解决如

Bellman-Ford 求含负权最短路

该算法详解请看   https://www.cnblogs.com/tanky_woo/archive/2011/01/17/1937728.html 单源最短路   当图中存在负权边时 迪杰斯特拉就不能用了 该算法解决了此问题 时间复杂度O(nm) 注意   图中含有负圈时不成立.当判定存在负圈时,这只说明s可以到达一个负圈,并不代表s到每个点的最短路都不存在. 另外,如果图中有其他负圈但是s无法达到这个负圈,该算法也无法找到,解决方法加一个节点(还不会...) 该算法可以用 队列 优化 名为

DAY 004--递归求某数的阶乘

004-- 用递归求解某数的阶乘 n的阶乘:n(n-1)(n-2)(n-3)****1 流程分析:                                                                             1.输入某个数字n,计算该数字的阶乘:n! 2.递归求阶乘函数,参数为n: 2.1.判断数字是否等于1,如果等于1 ,函数返回1 2.2.如果函数不返回1,则函数返回n*fun(n-1),以此递归 代码分析:                   

nslookup 工具的使用方法记录

查询IP地址 nslookup最简单的用法就是查询域名对应的IP地址,包括A记录和CNAME记录,如果查到的是CNAME记录还会返回别名记录的设置情况.其用法是: nslookup 域名 定查询记录类型的指令格式如下: nslookup –qt=类型 目标域名 注意qt必须小写.类型可以是一下字符,不区分大小写:A 地址记录(Ipv4)AAAA 地址记录(Ipv6)AFSDB Andrew文件系统数据库服务器记录(不懂)ATMA ATM地址记录(不是自动提款机)CNAME 别名记录HINFO 硬

知源图四点坐标和目标图四点坐标,求透视变换矩阵

最近在搞图像处理,碰到了透视变换的问题. 同事给我一些代码,里边有误差,挺严重,让我帮他想想哪里出错了.捣鼓了很久,我猜测肯定是透视变换矩阵求错了,然后我的透视变换之旅就开始了. 后来问题解决了,发现他的矩阵和我求得矩阵一摸一样,他的代码并没有错误,是他采用的图片在做广角变换的时候有误差,导致程序结果误差. 首先感谢xiaowei_cqu,是她的一篇博客(http://blog.csdn.net/xiaowei_cqu/article/details/26471527)教会了我变换原理. 后来去