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

来源：互联网发布：nfc手机支付软件编辑：程序博客网时间：2024/06/10 08:00

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

拖拽盒子代码：

<!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.onload=function(){                var oBox=document.getElementById('box');                //声明变量为空值↓                var x=null;                var y=null;                oBox.onmousedown=function(ev){                    var IEV=ev||event;//兼容处理                    x=IEV.clientX-oBox.offsetLeft;//赋值                    y=IEV.clientY-oBox.offsetTop;//赋值                                        document.onmousemove=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.onmouseup=function(){                        document.onmousedown=null;                        document.onmousemove=null;                    };                }            };        </script>    </head>    <body>        <div id="box"></div>    </body></html>

代码完--

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

0 0