『转载』标准的 手写 纯Js 的 DIV层的 拖拽 

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3  <head>
 4   <title>一个简单的js鼠标拖拽div层效果丨芯晴网页特效丨CsrCode.Cn</title>
 5  </head>
 6  <body>
 7   <script type="text/javascript">
 8   function drag(elementToDrag,event){
 9     var startX=event.clientX,startY=event.clientY;
10     var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;
11     var deltaX=startX-origX,deltaY=startY-origY;
12     if(document.addEventListener){
13        document.addEventListener("mousemove",moveHandler,true); 
14     document.addEventListener("mouseup",upHandler,true);
15  }
16  else{
17     elementToDrag.setCapture();
18     elementToDrag.attachEvent("onmousemove",moveHandler);
19     elementToDrag.attachEvent("onmouseup",upHandler);
20     elementToDrag.attachEvent("onlosecapture",upHandler);
21  }
22  if(event.stopPropagation) event.stopPropagation();
23  else event.cancelBubble=true;
24  
25  if(event.preventDefault) event.preventDefault();
26  else event.returnValue=false;
27  function moveHandler(e){
28    if(!e) e=window.event;
29    elementToDrag.style.left=(e.clientX-deltaX)+"px";
30    elementToDrag.style.top=(e.clientY-deltaY)+"px";
31    elementToDrag.style.zIndex="10";
32    elementToDrag.getElementsByTagName("p")[0].innerHTML="clientX:"+e.clientX+"</br>"+"clientY:"+e.clientY+"</br>"+"offsetLeft:"+origX+"</br>"+"offsetTop:"+origY+"</br>"+"clientX-offsetLeft:"+deltaX+"</br>"+"clientY-offsetTop:"+deltaY+"</br>";
33    if(e.stopPropagation) e.stopPropagation();
34    else e.cancelBubble = true;
35  }
36  function upHandler(e){
37    if(!e) e=window.event;
38       elementToDrag.style.zIndex="1";
39    if(document.removeEventListener){
40       document.removeEventListener("mouseup",upHandler,true);
41    document.removeEventListener("mousemove",moveHandler,true);
42    }
43    else{
44       elementToDrag.detachEvent("onlosecapture",upHandler);
45    elementToDrag.detachEvent("onmouseup",upHandler);
46    elementToDrag.detachEvent("onmousemove",moveHandler);
47    elementToDrag.releaseCapture();
48    }
49    if(e.stopPropagation) e.stopPropagation();
50    else e.cancelBubble=true;
51  }
52   }
53   </script>
54   <div style="position:absolute;left:100px;top:100px;width:250px;background-color:#789;border:1px solid #f00">
55     <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me1</div>
56  <p>test</p>
57   </div>
58     <div style="position:absolute;left:100px;top:200px;width:250px;background-color:#789;border:1px solid #f00">
59     <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me2</div>
60  <p>test</p>
61   </div>
62     <div style="position:absolute;left:100px;top:300px;width:250px;background-color:#789;border:1px solid #f00">
63     <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me3</div>
64  <p>test</p>
65   </div>
66  </body>
67 </html>





 






        

        

            posted on 
2013-05-15 16:56 
InkFx 
阅读(495) 
评论(0) 
 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

    
    

    

    





            

        

        

            

导航