Acticle 7:javascript运动：怎么修复拖拽运动中的bug

最新推荐文章于 2016-10-21 15:52:52 发布

颜洁

最新推荐文章于 2016-10-21 15:52:52 发布

阅读量227

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/amytun_yu/article/details/52809905

版权

js基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

                            JS的运动基础

1.首先呢，最原始的拖拽代码是这样的：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #div{
                width: 200px;
                height: 200px;
                background: aquamarine;
                position: absolute;
                text-align: center;
                line-height: 200px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oDiv=document.getElementById('div');
                var disx=0;
                var disy=0;
                oDiv.onmousedown=function(ev){//鼠标按下事件
                      var iEvent=ev||event;
                      disx=iEvent.clientX-oDiv.offsetLeft;
                      disy=iEvent.clientY-oDiv.offsetTop;
                    //在鼠标按下事件里面进行鼠标移动事件

                    document.onmousemove=function(ev){//这里使用document呢，是为了让鼠标移动的区域变得大一点
                        var iEvent=ev||event;
                        var left=iEvent.clientX-disx;
                        var top=iEvent.clientY-disy;

                        oDiv.style.left=left+'px';//加上单位后，盒子才能够移动
                        oDiv.style.top=top+'px';

                    }
                    document.onmouseup=function(){//当鼠标弹起时，让onmousedown事件和onmousemove事件清空，之后就是鼠标弹起的时候，盒子不在跟着鼠标的光标移动
                        document.onmousedown=null;
                        document.onmousemove=null;
                    }

                }
            }
        </script>
    </head>
    <body>
        <div id="div">
            你好啊
        </div>
    </body>
</html>

恩，然后运行结果如下图片所示：
这里写图片描述
2. 接下来，就是给盒子设置条件限制，让其只在屏幕的第一屏里活动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            #div{
                width: 200px;
                height: 200px;
                background: aquamarine;
                position: absolute;
                text-align: center;
                line-height: 200px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oDiv=document.getElementById('div');
                var disx=0;
                var disy=0;
                oDiv.onmousedown=function(ev){
                    var iEvent=ev||event;
disx=iEvent.clientX-oDiv.offsetLeft;
                    var disy=iEvent.clientY-oDiv.offsetTop;
                    document.onmousemove=function(ev){
                        var iEvent=ev||event;

                        var left=iEvent.clientX-disx;
                        var top=iEvent.clientY-disy;
                        //下面呢设置判断的条件，让盒子限制在浏览器的第一屏里移动。
                        if(left<0){//如果盒子向左移动的位置小于0时，那么让它的距离重设置为0
                            left=0;
                        }
                        else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){
                            //这里的是右边的限制条件
                            //如果盒子向右的距离大于窗口可视区的宽度减去盒子本身的宽度时，那么就让它的距离等于盒子向右的距离大于窗口可视区的宽度减去盒子本身的宽度
                        left=document.documentElement.clientWidth-oDiv.offsetWidth;                 
                        }
                        if(top<0){//如果盒子向上移动的位置小于0时，那么让它的距离重设置为0
                            top=0;
                        }
                        else if(top>document.documentElement.clientHeight-oDiv.offsetHeight){
                            //这里的是下边的限制条件
                            //如果盒子向下的距离大于窗口可视区的高度减去盒子本身的高度时，那么就让它的距离等于盒子向下的距离大于窗口可视区的高度减去盒子本身的高度
                            top=document.documentElement.clientHeight-oDiv.offsetHeight;
                        }
                        //加上了这段有限制条件的代码后，盒子就只能在窗口的第一屏里移动了
                        oDiv.style.left=left+'px';
                        oDiv.style.top=top+'px';
                    }
                    document.onmouseup=function(){
                        document.onmousedown=null;
                        document.onmousemove=null;
                    }

                }

            }
        </script>

    </head>
    <body>
        <div id="div">
            你好啊
        </div>
    </body>
</html>

颜洁

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Acticle 7:javascript运动：怎么修复拖拽运动中的bug

JS的运动基础1.首先呢，最原始的拖拽代码是这样的：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #div{ width: 200px;
复制链接

扫一扫