搞定

搞定

关注
发信
关注(28)粉丝(399)

拖拽碰撞效果，高级浏览器下全部搞定（ie6-8还没有搞定）

<!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-1;i>=0;i--){

    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 tar=null;

    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);

            var mind=9999999;

            var num=-1;

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

                s[i].className='';

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

                    var dis=distance(obj,s[i]);

                    if(mind>dis){

                        mind=dis;

                        num=i;

                        for(j=0;j<siblings(obj).length;j++){

                            siblings(obj)[j].className='';

                        }

                        s[num].className="active";

                    }

                }

                tar=s[num]

            }

        }

        document.onmouseup=function(){

            if(tar){

                tar.className='';

            }

            exchangePosition(obj,tar,aa);
　　　　　　　tar=null;

            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";

    }

    b=null;

}

//求两个Div之间的距离

function distance(x,y){

        var l=x.offsetLeft;

        var t=x.offsetTop;

        var ll=y.offsetLeft;

        var tt=y.offsetTop;

        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>

ie6-8还没有搞定，主要是在拖动的时候首先动的是图片，需要事件捕获，正好又趁这个机会仔仔细细的研究一下js的冒泡的时间捕获，完整的做一个效果确实可以学习很多的知识。

加了一个运动效果

低级浏览器下面还是没有搞定，一点一点的添加一点一点的完善吧

<!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;

    _display:inline;

}

#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-1;i>=0;i--){

    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 tar=null;

    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;

    if(e.stopPropagation) {

        e.stopPropagation();

    }else{

        e.cancelBubble = true;

    }

        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);

            var mind=9999999;

            var num=-1;

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

                s[i].className='';

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

                    var dis=distance(obj,s[i]);

                    if(mind>dis){

                        mind=dis;

                        num=i;

                        for(j=0;j<siblings(obj).length;j++){

                            siblings(obj)[j].className='';

                        }

                        s[num].className="active";

                    }

                }

                tar=s[num]

            }

    if(e.stopPropagation) {

        e.stopPropagation();

    }else{

        e.cancelBubble = true;

    }

        }

        document.onmouseup=function(){

            if(tar){

                tar.className='';

            }

            exchangePosition(obj,tar,aa);

            tar=null;

            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";

        move(a,{left:b.offsetLeft,top:b.offsetTop});

        move(b,{left:x[0],top:x[1]});

    }else{

        move(a,{left:x[0],top:x[1]})

    }

}

//求两个Div之间的距离

function distance(x,y){

        var l=x.offsetLeft;

        var t=x.offsetTop;

        var ll=y.offsetLeft;

        var tt=y.offsetTop;

        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;

}

function move(obj,json,fn){

    clearInterval(this.timer)

    obj.timer=setInterval(function(){

        obj.bstop=true;

        for(i in json){

            var pos=parseInt(getcss(obj,i));

            var speed=pos>json[i]?Math.floor(((json[i]-pos)/8)): Math.ceil(((json[i]-pos)/8));

            obj.style[i]=speed+pos+"px";

            if(parseInt(getcss(obj,i))!=json[i]){

                obj.bstop=false;

            }

        }

        if(obj.bstop){

            clearInterval(obj.timer);

            fn && fn();

        }

    },30)

}

function getcss(obj,attr){

    return getComputedStyle(obj,null)[attr]||obj.currentStyle()[attr];

}

</script>
05-06 04:46
Powered by LMLPHP ©2024 搞定 0.078321