怎么判断DIV拖动的时候是在当前可见区域

如题。类似 126邮箱的弹出对话框 最好能兼容 ff

解决方案 »

  1.   

    判断div与边框距离应该就可以了吧
      

  2.   


    <html> 
       <head> 
         <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
         <title>DargTest</title> 
         <style type="text/css"> 
        body{ font-size:10pt;}
        #Left{border:solid 1px black;position:absolute;}
        #Contain{border:solid 1px blue; position:absolute;}
        div.item{ background-color:black;border:0px; position:absolute;}
        .Copy{filter:alpha(opacity=60);opacity:0.6;}
        .Down{filter:alpha(opacity=100);opacity:1;}
         </style> 
       </head> 
       <body>
       <div id="Left" style="top:20px;left:20px;height:500px;width:100px;">
       </div>
         <div class="item" style="width:50px;height:50px;top:30px;left:30px" id="Item1"></div> 
         <div class="item" style="width:30px;height:30px;top:90px;left:30px" id="Item2"></div>
         <div class="item" style="width:20px;height:20px;top:130px;left:30px" id="Item3"></div>
         <div class="item" style="width:15px;height:15px;top:160px;left:30px" id="Item4"></div> 
       <div id="Contain" style="left:150px;width:500px;height:500px;top:20px;z-index:-1;"></div>
       <script type="text/javascript">
       var DragLeft,DragRight,DragTop,DragBottom;
       var ItemLeft,ItemRight,ItemTop,ItemBottom;
       var CookieName="pos";
       String.prototype.trim=function(reg){if(reg)return this.replace(reg,"");else return this.replace(/^\s*|\s*$/g,"");}
       function $(Id){return document.getElementById(Id);}
       function SaveCookie()
       {
         var cstr="var PosArr=[];";
         var div=document.getElementsByTagName("div");
         for(var i=0;i<div.length;i++)
         {
            if(div[i].className=="item"&&div[i].id)
            {
              cstr+="PosArr['"+div[i].id+"']={top:'"+div[i].style.top+"',left:'"+div[i].style.left+"'};";
            }
         }
         var d=new Date();
         d.setDate(d.getDate()+30);
         document.cookie=CookieName+"="+escape(cstr)+";expires="+d.toGMTString()
       }
       function ReadCookie()
       {
          var str=document.cookie;
          var m=str.match(new RegExp(CookieName+"=([^;]+);?","i"));
          if(m)  return unescape(m[1]);
          else return "";
       }
       window.onload=function()
       {
         var cstr=ReadCookie();
         var Pos;
         if(cstr.trim()!="")
           eval(cstr);//执行cookie的代码生产数组
         var Items=document.getElementsByTagName("div");
         for(var i=0;i<Items.length;i++)
         {
           if(Items[i].className=="item")
           {
             Pos=typeof(PosArr)=="undefined"?null:PosArr[Items[i].id];
             if(Pos)
             {
                Items[i].style.top=Pos.top;
                Items[i].style.left=Pos.left;
             }
             Items[i].onmousedown=MouseDown;
             }
         } 
         var c=$("Left"); 
         ItemLeft=parseInt(c.style.left);
         ItemTop=parseInt(c.style.top);
         c=$("Contain");
         DragLeft=parseInt(c.style.left);
         DragTop=parseInt(c.style.top);  
       }
       
       var OL,OT,ex,ey;
       var MoveDiv=null;
       function MouseDown(e)
       {
         MoveDiv=this;
         OL=parseInt(MoveDiv.style.left);
         OT=parseInt(MoveDiv.style.top);
         MoveDiv.style.left=OL-5+"px"
         MoveDiv.style.top=OT-5+"px"
         MoveDiv.className="item Copy";
         e=e||event;
         ex=e.clientX;
         ey=e.clientY;
         var c=$("Left");
         ItemBottom=ItemTop+parseInt(c.style.height)-MoveDiv.offsetHeight;
         ItemRight=ItemLeft+parseInt(c.style.width)-MoveDiv.offsetWidth;
         c=$("Contain");
         DragBottom=DragTop+parseInt(c.style.width)-MoveDiv.offsetHeight;
         DragRight=DragLeft+parseInt(c.style.height)-MoveDiv.offsetWidth;
       }
       document.onmousemove=function(e)
       {
          if(MoveDiv)
          {
            e=e||event;
            var left=e.clientX-ex+OL;
            var top=e.clientY-ey+OT;
            if(top<DragTop)top=DragTop;
            else if(top>DragBottom)top=DragBottom;
            if(left>DragRight)left=DragRight;
            MoveDiv.style.left=left+"px";
            MoveDiv.style.top=top+"px";
          }
       }
       document.onmouseup=function(e)
       {
         if(MoveDiv)
         {
            e=e||event;
            var left=e.clientX-ex+OL;
            var top=e.clientY-ey+OT;
            if((left>=ItemLeft&&left<=ItemRight)&&(top>=ItemTop&&top<=ItemBottom))//在左边框内
            {
              MoveDiv.className="item";
              MoveDiv=null;
              return;
            }
            else  if(left<DragLeft)//如果不在右边的框内，还原成原来的位置
            {
              MoveDiv.style.left=OL+"px";
              MoveDiv.style.top=OT+"px";
              MoveDiv.className="item";
              MoveDiv=null;
              return;
            }
            MoveDiv.className="item";
            MoveDiv=null;
         }
       }
       window.onbeforeunload=function()
       {
         SaveCookie();
       }
       </script>
       </body> 
    </html>拖动DIV并保存其位置
    你要的效果里面有，因为代码里面有写COOKEY，浏览器会限制自动执行脚本，你自己看吧