zoukankan      html  css  js  c++  java

  • 拖拽碰撞效果，高级浏览器下全部搞定（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>
  • 相关阅读:
    人人开源框架学习笔记
    Gitea安装笔记
    使用sdk方式获取微信的用户信息
    重写java类的equals()和hashCode方法
    Mysql 实现分页功能
    位运算应用和解析
    java代码POST方式请求SOAP
    java实现文件拷贝
    动态创建线程（多线程）处理大量数据
    ActiveMQ监听者接收信息
  • 原文地址：https://www.cnblogs.com/busicu/p/3972123.html
Copyright © 2011-2022 走看看