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

拖拽碰撞效果，高级浏览器下全部搞定（ie6-8还没有搞定）的更多相关文章

  1. ToolStrip控件左右拖拽移动效果实现

    1.主窗体下部添加一个Panel乘放ToolStrip控件以实现ToolStrip在窗体下部定位.2.当ToolStrip控件中子控件超出屏幕时,拖动控件可以实现滑动效果.拖动到控件边缘距窗体边缘1/ ...

  2. js 拖拽 碰撞 + 重力 运动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. react实现的点击拖拽元素效果

    之前用vue做日程管理组件的时候,用到了点击拖拽的效果,即点击元素,鼠标移动到哪里,元素移动到哪里,鼠标松开,拖拽停止,现在在弄react,于是也在想实现这个效果,经过一番折腾,效果出来了,代码如下: ...

  4. js实现音量拖拽的效果模拟

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>js ...

  5. reactnative实现qq聊天消息气泡拖拽消失效果

    前言(可跳过) 我在开发自己的APP时遇到了一个类似于qq聊天消息气泡拖拽消息的需求,因为在网上没有找到相关的组件,所以自己动手实现了一下 需求:对聊天消息气泡拖拽到一定长度松开时该气泡会消失(可自行 ...

  6. Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

    我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图 我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来 ...

  7. Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果

    探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...

  8. Android中GridView拖拽的效果【android进化三十六】

      最 近看到联想,摩托罗拉等,手机launcher中有个效果,进入mainmenu后,里面的应用程序的图标可以拖来拖去,所以我也参照网上给的代码,写了 一个例子.还是很有趣的,实现的流畅度没有人家的 ...

  9. Android中GridView拖拽的效果

    最 近看到联想,摩托罗拉等,手机launcher中有个效果,进入mainmenu后,里面的应用程序的图标可以拖来拖去,所以我也参照网上给的代码,写了 一个例子.还是很有趣的,实现的流畅度没有人家的那么 ...

随机推荐

  1. 夺命雷公狗ThinkPHP项目之----企业网站5之栏目的添加（主要是图片上传）

    我们照老,先老搞定控CategoryController.class.php制器,代码如下所示: <?php namespace Admin\Controller; use Think\Cont ...

  2. java 操作excel 文件

    JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该API非Windows操作系统也可以通过 ...

  3. zw版【转发·台湾nvp系列Delphi例程】HALCON DirectShow (Delphi Prism)

    zw版[转发·台湾nvp系列Delphi例程]HALCON DirectShow (Delphi Prism) namespace DirectShow_Prism;interfaceuses Sys ...

  4. 解决 “invalid resource directory name”, resource “crunch”

        try this: from the menu click Project->Clean... a popup window will appear. select the check ...

  5. nginx负载均衡的实现

    将一台nginx主机当作前端负载均衡服务器,后面通过交换机链接多台web服务器,提供html和php的web界面服务.通过配置前端负载均衡服务器,可以实现将html界面和php界面的分开访问,即htm ...

  6. Delphi xe 下快捷使用 FastMM 的内存泄露检测功能

    Delphi xe 集成了FastMM,调试程序是的时候可以方便地检查内存泄露了.  使用方法:在project中,添加一行: ReportMemoryLeaksOnShutdown := Debug ...

  7. 使用 Delphi Xe 的 TDictionary

    原本一直使用 TList, 将定义的一个个 Record 保存在TList 里面, 为了能把某些对象管理起来, 例如一个类的 n 多实例,可以进行索引.查找.释放等 今天刚看到原来已经有了一个叫 TD ...

  8. Redis 安装与简单示例 01_转

    一.Redis的安装 Redis下载地址如下:https://github.com/dmajkic/redis/downloads 解压后根据自己机器的实际情况选择32位或者64位.下载解压后图片如下 ...

  9. MyBatis的Dao层注入SqlSession

    有点坑爹,以前没用过Mybatis,最近才用,而且一直用Mybatis推荐的接口映射的方式,但是今天有人告诉我接口方式用得少,大多还是采用从配置文件里面读sql的方式,当然接口也是类似的,都是利用ma ...

  10. 【转载】perl接受传递参数的方法

    #! /usr/bin/perl use Getopt::Std;use warnings;use strict; sub read_from_sh($) { my $file = shift; my ...