一个拖拽效果的几个应用
<!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>