<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>原生js拖拽效果</title>  
    </head>  
    <body>  
        <div id="box"></div>  
          
        <script type="text/javascript">  
            var oBox = document.getElementById('box');  
            oBox.onmousedown = function(e){  
                var oEvent =e || window.event,  
                    disL = oEvent.clientX - oBox.offsetLeft,  
                    disT = oEvent.clientY - oBox.offsetTop,  
                    maxL = document.documentElement.clientWidth - oBox.offsetWidth,  
                    maxT = document.documentElement.clientHeight - oBox.offsetHeight;  
                      
                document.onmousemove = function(e){  
                    var oEvent = e || window.event,  
                        disX = oEvent.clientX - disL,  
                        disY = oEvent.clientY - disT;  
                          
                        //console.log(disX);  
                    if(disX <=0){ disX =0}  
                    if(disY <=0){ disY =0}  
                    if(disX >=maxL){ disX =maxL}  
                    if(disY >=maxT){ disY =maxT}  
                    oBox.style.left = disX+'px';  
                    oBox.style.top = disY+'px';  
                }  
                  
            }  
            document.onmouseup=function(){  
            document.onmousemove=null;  
        }  
        </script>  
          
        <style type="text/css">  
            *{ margin:0; padding:0;}  
            #box{ position:absolute; left:0; top:0; width:100px; height:100px; background:#f60;}  
        </style>  
    </body>  
</html>
版权声明：本文为李维亮博主的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://www.liweiliang.com/836.html

标签: none

评论已关闭