JS拖拽元素 兼容IE

y637 10年前發布 | 1K 次閱讀 JavaScript 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

    <html xmlns="http://www.w3.org/1999/xhtml&quot; xml:lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <title>Document</title>

        <style>

         *{

            margin: 0px;

            padding:0px;

         }



     #div1{  
        width: 500px;  
        height: 500px;  
        position: relative;  
        border:1px solid #ff00ff;  
        top:100px;  
        left: 300px;  
     }  
     #div2{  
        position: absolute;  
        width: 150px;  
        height: 150px;  
        top:0px;  
        left:0px;  
        background: #ff00ff;  
     }  
     .boxs{  
        border:1px dashed #000000;  
        position: absolute;  
     }  
    </style>  
    <script>  
    function getpos(ev){  
      var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;  
      var scrollleft=document.documentElement.scrollLeft||document.body.scrollLeft;  
      return {x:ev.clientX+scrollleft,y:ev.clientY+scrolltop}  

    }  
    function addEvent(obj,even,fn){ /*事件綁定*/  
       return obj.addEventListener?obj.addEventListener(even,fn,false):obj.attachEvent("on"+even,fn);  
    }  
    function unEvent(obj,even,fn){  
        return obj.removeEventListener?obj.removeEventListener(even,fn,false):obj.detachEvent("on"+even,fn);  
    }  
      window.onload=function(){  
         var odiv1=document.getElementById("div1");  
             odiv2=document.getElementById("div2");  
             disX=0;  
             disY=0;  
         addEvent(odiv2,"mousedown",function(ev){  
               var eventr=ev||event;  
               pos=getpos(eventr);  
               disX=pos.x-this.offsetLeft;  
               disY=pos.y-this.offsetTop;  
               creatElement=document.createElement("div");  
               creatElement.className="boxs";  
               creatElement.style.width=odiv2.offsetWidth-2+"px";  
               creatElement.style.height=odiv2.offsetHeight-2+"px";  
               creatElement.style.top=odiv2.offsetTop+"px";  
               creatElement.style.left=odiv2.offsetLeft+"px";  
               div1.appendChild(creatElement);  
           document.onmousemove=function(ev){  
            var eventr=ev||event;  
             pos=getpos(eventr);  
               creatElement.style.left=pos.x-disX+"px";  
               creatElement.style.top=pos.y-disY+"px";  
              if(creatElement.offsetTop<0){  
               creatElement.style.top=0+"px";  
              }  
              if(creatElement.offsetLeft<0){  
               creatElement.style.left=0+"px";  
              }  
              if(creatElement.offsetTop>odiv1.offsetHeight-odiv2.offsetHeight){  
                 creatElement.style.top=odiv1.offsetHeight-odiv2.offsetHeight+"px";  
              }  
               if(creatElement.offsetLeft>odiv1.offsetWidth-odiv2.offsetWidth){  
                 creatElement.style.left=odiv1.offsetWidth-odiv2.offsetWidth+"px";  
              }  
           }  
            document.onmouseup=function(){  
                 odiv2.style.left=creatElement.offsetLeft+"px";  
                 odiv2.style.top=creatElement.offsetTop+"px";  
                 div1.removeChild(creatElement);  
                 unEvent(odiv2,"mousedown");  
                 document.onmousemove=null;  

              }  
            return false;  
             })  

      }  
    </script>  
</head>  
<body>  
  <div id="div1">  
      <div id="div2"></div>  
  </div>  
</body>  
</html>  </pre>
 本文由用戶 y637 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！