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