一个拖拽效果的几个应用

最新推荐文章于 2024-10-01 20:12:28 发布
weixin_30697239
最新推荐文章于 2024-10-01 20:12:28 发布
阅读量96
点赞数
文章标签： json xhtml 数据库
原文链接：http://www.cnblogs.com/yanwen2015/p/4232090.html
版权
<!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>