悟生慧

 

纯javaScript实现div层拖动/移位效果 推荐学习 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
 <head>  
    <title>dragDiv.html</title>  
      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    <meta http-equiv="description" content="this is my page">  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <style type="text/css">  
      body {  
            font-family:Verfana;  
            font-size:11px;  
            color:#333333;  
        }  
       #win {  
            position:absolute;  
            left:50px;  
            top:50px;  
            width:200px;  
            height:150px;  
            border:1px solid #000000;  
            background:yellow;  
        }  
    </style>  
    <script type="text/javascript">  
       var win;  
       var left = 50;  
       var top = 50;  
       var move = false;  
        function init() {  
            win = document.getElementById("win");  
            win.onmousedown = startDrag;  
            win.onmousemove = drag;  
            win.onmouseup = stopDrag;  
      }  
         
        window.onload = init;  
         
       function startDrag(event) {  
            event = event || window.event;  
            var x = event.pageX || event.x;  
            var y = event.pageY || event.y;  
            left = x - left;  
            top = y - top;  
            win.style.background = "red";  
            move = true;  
      }  
          
     function drag(event) {  
            if(move) {  
            event = event || window.event;  
               win.style.background = "blue";  
               var x = event.pageX || event.x;  
               var y = event.pageY || event.y;  
               win.style.left = x - left + "px";  
               win.style.top = y - top + "px";  
             //captureEvents();  
                //win.setCapture();  
             if (!window.captureEvents) {   
                  win.setCapture();      
            } else {  
                 captureEvents();      
                   //window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);      
              }      
            }  
     }  
         
        function stopDrag(event) {  
           event = event || window.event;  
           win.style.background="yellow";  
           var x = event.pageX || event.x;  
           var y = event.pageY || event.y;  
           left = x - left;  
           top = y - top;  
           move = false;  
           //routeEvent();  
          //win.releaseCapture();  
         if (!window.releaseEvents) {   
              win.releaseCapture();      
           } else {      
                releaseEvents();  
               //window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);      
            }  
        }  
    </script>  
  </head>  
<body>  
    <div id="win">  
    </div>  
</body>  
</html>

 

posted on 2012-09-27 15:26  悟生慧  阅读(536)  评论(0)    收藏  举报

导航