拖拽中怎么修复bug(霸哥)

最新推荐文章于 2020-08-10 10:00:38 发布

何伟源

最新推荐文章于 2020-08-10 10:00:38 发布

阅读量541

点赞数

分类专栏： JS从精通到懵逼

本文链接：https://blog.csdn.net/sTranDed_/article/details/52799724

版权

JS从精通到懵逼专栏收录该内容

6 篇文章 0 订阅

订阅专栏

让你试试被代码支配的恐惧

拖拽盒子代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{background: red;height: 50px;width: 50px;position: absolute;}
        </style>
        <script type="text/javascript">
            window.οnlοad=function(){
                var oBox=document.getElementById('box');
                //声明变量为空值↓
                var x=null;
                var y=null;
                oBox.οnmοusedοwn=function(ev){
                    var IEV=ev||event;//兼容处理
                    x=IEV.clientX-oBox.offsetLeft;//赋值
                    y=IEV.clientY-oBox.offsetTop;//赋值
                    
                    document.οnmοusemοve=function(ev){
                        var IEV=ev||event;
                        var Top=IEV.clientY-y;
                        var Left=IEV.clientX-x;
                        //以下是让盒子在拖拽中不脱离屏幕可见区域的代码
                        
                        if(Top<0){
                            Top=0;//上
                        }
                        else if(Top>document.documentElement.clientHeight-oBox.offsetHeight){
                            Top=document.documentElement.clientHeight-oBox.offsetHeight;//下
                        }
                        if(Left<0){
                            Left=0;//左
                        }
                        else if(Left>document.documentElement.clientWidth-oBox.offsetWidth){
                            Left=document.documentElement.clientWidth-oBox.offsetWidth;//右
                        }
                        //让盒子运动的代码↓
                        oBox.style.left=Left+'px';
                        oBox.style.top=Top+'px';
                        
                    };
                    //上面的代码鼠标放开时移动鼠标盒子仍会移动，以下代码加以处理
                    document.οnmοuseup=function(){
                        document.οnmοusedοwn=null;
                        document.οnmοusemοve=null;
                    };
                }
            };
        </script>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

代码完--

如有不懂，请。。。再看一遍。还是不懂，反复之，总会懂得！！！