<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {margin:0; padding:0;}
#ul1 {width:660px; position:relative; margin:10px auto;}
#ul1 li {width:200px; height:150px; float:left; list-style:none; margin:10px;}
.active{border:1px solid red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type='text/javascript'>
function getStyle(obj, attr)
{
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj, false)[attr];
}
}
//运用框架利用了json去取运用值，有回调函数
function startMove(obj, json, fn){
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true;
for(var attr in json){
var iCur=0;
if(attr=='opacity'){
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}else{
iCur=parseInt(getStyle(obj, attr));
}
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iCur!=json[attr]){
bStop=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}else{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop){
clearInterval(obj.timer);
if(fn){
fn();//执行回调函数
}
}
}, 30)
}
window.onload=function(){
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName("li");
var arr=[];
var iMinIndex=2;
var odata=[];
for(var i=0;i<aLi.length;i++){
arr.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop});
}
//这里用cookie模拟数据库获取位置
var oIndex=getCookie("indexss").split(",");
for(var i=0;i<aLi.length;i++){
aLi[i].style.position="absolute";
aLi[i].style.margin="0px";
if(oIndex==" "){
//下面的索引进行了调换，在这里可以用索引获取他的属性值
aLi[i].style.left=arr[i].left+"px";
aLi[i].style.top=arr[i].top+"px";
aLi[i].index=i;
}else{
aLi[i].style.left=arr[oIndex[i]].left+"px";
aLi[i].style.top=arr[oIndex[i]].top+"px";
aLi[i].index=parseInt(oIndex[i]);
}
}
function setCookie(name,value,iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+"="+value+";expires="+oDate;
}
function getCookie(name){
var oCookie=document.cookie.split("; ");
for(var i=0;i<oCookie.length;i++){
var arr=oCookie[i].split("=");
if(arr[0]==name){
return arr[1];
}
}
return " ";
}
function removeCookie(name){
setCookie(name,1,-1);
}
function setDrag(obj){
var disX=0;
var disY=0;
obj.onmousedown=function(ev){
var ev=ev||event;
disX=ev.clientX-obj.offsetLeft;
disY=ev.clientY-obj.offsetTop;
document.onmousemove=function(ev){
var ev=ev||event;
obj.style.left=ev.clientX-disX+"px";
obj.style.top=ev.clientY-disY+"px";
obj.style.zIndex=iMinIndex++;
for(var i=0;i<aLi.length;i++){
aLi[i].className="";
};
//接收一个值，改变他的样式;
var oNear=findNearest(obj);
if(oNear){
oNear.className="active";
}
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
var oNear=findNearest(obj);
if(oNear){
oNear.style.zIndex=iMinIndex++;
obj.style.zIndex=iMinIndex++;
startMove(obj,arr[oNear.index]);
startMove(oNear,arr[obj.index]);
oNear.className="";
//改变索引位置相互对调，索引可以访问这个对象的所有属性
var temp=0;
temp=oNear.index;
oNear.index=obj.index;
obj.index=temp;
}else{
startMove(obj,arr[obj.index]);
}
var oArr=[];
for(var i=0;i<aLi.length;i++){
oArr.push(aLi[i].index);
}
setCookie("indexss",oArr,1);
}
clearInterval(obj.timer);
return false;
}
}
for(var i=0;i<aLi.length;i++){
setDrag(aLi[i]);
}
function cdTest(obj1, obj2){//找碰撞,碰到返回true,没有碰到返回false
var l1=obj1.offsetLeft;
var r1=obj1.offsetLeft+obj1.offsetWidth;
var t1=obj1.offsetTop;
var b1=obj1.offsetTop+obj1.offsetHeight;
var l2=obj2.offsetLeft;
var r2=obj2.offsetLeft+obj2.offsetWidth;
var t2=obj2.offsetTop;
var b2=obj2.offsetTop+obj2.offsetHeight;
if(r1<l2 || l1>r2 || b1<t2 || t1>b2)
{
return false;
}
else
{
return true;
}
};
function getDis(obj1,obj2){//勾股定理找到对象之间的距离值
var x=obj1.offsetLeft-obj2.offsetLeft;
var y=obj1.offsetTop-obj2.offsetTop;
return Math.sqrt(x*x+y*y);
}
function findNearest(obj){//根据拖动物体找最近值，记录最近值，返回最近值
var iMin=99999;
var iMinIndex=-1;
for(var i=0;i<aLi.length;i++){
if(obj==aLi[i]) continue;
if(cdTest(obj,aLi[i])){
var dis=getDis(obj,aLi[i]);
if(dis<iMin){
iMin=dis;
iMinIndex=i;
}
}
}
if(iMinIndex==-1){
return null;
}else{
return aLi[iMinIndex];
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li style="background-color: red"></li>
<li style="background-color: yellow"></li>
<li style="background-color: blue"></li>
<li style="background-color: #ccc"></li>
<li style="background-color: orange"></li>
<li style="background-color: red"></li>
<li style="background-color: #000"></li>
<li style="background-color: blue"></li>
</ul>
</body>
</html>
浙公网安备 33010602011771号