javascript 鼠标拖拽盒子--基础功能版

最新推荐文章于 2022-11-08 09:32:06 发布

★Sir

最新推荐文章于 2022-11-08 09:32:06 发布

阅读量961

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Ljs_cn/article/details/52812456

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background: lightskyblue;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oBox=document.getElementById('box');

                var disx=0; //鼠标按住盒子box后,相对box的水平坐标，初始化
                var disy=0;

                oBox.onmousedown=function(ev){
                    var oEvent=ev||event;
                    disx=oEvent.clientX-oBox.offsetLeft;
                    disy=oEvent.clientY-oBox.offsetTop;

                    //不能用oBox.onmousemove=function(ev){}  
                    //oBox的作用域相对document小，一旦鼠标拖拽速度很快,鼠标指针从盒子内部“甩出”，盒子就不会随着鼠标走
                    document.onmousemove=function(ev){
                        var oEvent=ev||event;
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
                        //  加入下面这段，实现了， 鼠标拖拽盒子，不会出现，把盒子，甩出可视区域。
                        var oLeft=oEvent.clientX-disx;
                        var oTop=oEvent.clientY-disy;

                        if(oLeft<0){
                            oLeft=0;
                        }
                        //不能写else else不能判断，else后面是直接跟着{}，{}里面写结果
                        //else if(){}用于多条件判断
                        else if(oLeft>document.documentElement.clientWidth-oBox.offsetWidth){
                            oLeft=document.documentElement.clientWidth-oBox.offsetWidth;
                        }

                        if(oTop<0){
                            oTop=0;
                        }
                        //不能写else else不能判断，else后面是直接跟着{}，{}里面写结果
                        //else if(){}用于多条件判断
                        else if(oTop>document.documentElement.clientHeight-oBox.offsetHeight){
                            oTop=document.documentElement.clientHeight-oBox.offsetHeight;
                        }

                        oBox.style.left=oLeft+'px';
                        oBox.style.top=oTop+'px';
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++                      //oBox.style.left=oEvent.clientX-disx+'px';
                        //oBox.style.top=oEvent.clientY-disy+'px';

                    };
                    //不能用oBox.onmousemove=function(ev)  
                    //oBox的作用域相对document小，一旦鼠标拖拽速度很快，盒子就不会随着鼠标走
                    document.onmouseup=function(){
                        // 松开鼠标按键后，盒子不会再动。
                        document.onmousedown=null;
                        document.onmousemove=null;
                    };

                    return false; // 针对 火狐低版本的 二次拖拽出现的鬼影 。（但现在浏览器高版本，可能没有这个bug了。）
                };                                              
            };
        </script>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>