面向对象编程——案例篇（拖拽）

最新推荐文章于 2024-04-27 19:03:57 发布

姜无忧

最新推荐文章于 2024-04-27 19:03:57 发布

阅读量965

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/xiasohuai/article/details/85880369

版权

javascript 专栏收录该内容

90 篇文章 6 订阅

订阅专栏

原始的面向过程代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            #box {
                width: 100px; 
                height: 100px; 
                background: blue; 
                position: absolute;
            }
        </style>
        <title>拖拽</title>
        <script>
            var oBox=null;
            var disX=0;
            var disY=0;
            
            window.onload=function(){
                oBox=document.getElementById('box');
                
                oBox.onmousedown=fnDown;
            };
            //鼠标按下事件
            function fnDown(ev){
                var oEvent = ev||event;
                disX = oEvent.clientX - oBox.offsetLeft;
                disY = oEvent.clientY - oBox.offsetTop;
                
                document.onmousemove = fnMove;
                document.onmouseup = fnUp;
            }
            //鼠标移动事件
            function fnMove(ev){
                var oEvent=ev||event;
                
                oBox.style.left = oEvent.clientX - disX + 'px';
                oBox.style.top = oEvent.clientY - disY + 'px';
            }
            //鼠标抬起事件
            function fnUp(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        </script>
    </head>

<body>
    <div id="box"></div>
</body>
</html>

下面是面向对象的代码

drag.js

/**
 * 拖拽
 * @param {Object} id div的id
 */
function Drag(id){
    this.oBox = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
    
    var _this = this;
    
    this.oBox.onmousedown = function(){
        _this.fnDown();
    }
}
//鼠标按下
Drag.prototype.fnDown = function(ev){
    var oEvent = ev || event;
    
    this.disX = oEvent.clientX - this.oBox.offsetLeft;
    this.disY = oEvent.clientY - this.oBox.offsetTop;
    
    var _this = this;
    
    document.onmousemove = function(){
        _this.fnMove();
    };
    document.onmouseup = function(){
        _this.fnUp();
    };
}
//鼠标移动
Drag.prototype.fnMove = function(ev){
    var oEvent= ev || event;
    
    this.oBox.style.left = oEvent.clientX - this.disX + 'px';
    this.oBox.style.top = oEvent.clientY - this.disY + 'px';
}
//鼠标抬起
Drag.prototype.fnUp = function(){
    document.onmousemove = null;
    document.onmouseup = null;
}

drag.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            div {
                position: absolute;
            }
        </style>
        <title>拖拽</title>
        <script type="text/javascript" src="../js/drag.js" ></script>
        <script>
            window.onload = function(){
                var drag1 = new Drag("box1");
                
                var drag1 = new Drag("box2");
            };
        </script>
    </head>

<body>
    <div id="box1" style="background: red;width: 200px;height: 200px;"></div>    
    <div id="box2" style="background: blue;width: 100px;height: 100px;"></div>
</body>
</html>

此拖拽有一个问题，就是没有控制拖拽出边界的问题。但我们又不想去修改代码，那我们怎么做？学过java的应该都知道可以写一个子类来做一些更加具体的操作，又保留了父类的功能，就是继承。

html

<script type="text/javascript" src="../js/drag.js" ></script>
<script type="text/javascript" src="../js/dragLimit.js" ></script>
<script>
    window.onload = function(){
          var drag1 = new Drag("box1");              
          var drag1 = new DragLimit("box2");//蓝色是不会超出边界的
    };
</script>
<body>
    <div id="box1" style="background: red;width: 200px;height: 200px;"></div>    
    <div id="box2" style="background: blue;width: 100px;height: 300px;"></div>
</body>

DragLimit.js：DragLimit继承自Drag，控制了不能出边界

/**
 * 限制边界的拖拽，继承自Drag
 * @param {Object} id
 */
function DragLimit(id){
    Drag.call(this, id);
}
//继承方法
for(var p in Drag.prototype){
    DragLimit.prototype[p] = Drag.prototype[p];
}
/**
 * 覆写父类的鼠标移动方法，控制不能移出边界
 */
DragLimit.prototype.fnMove = function(ev){
    var oEvent= ev || event;
    
    var left = oEvent.clientX - this.disX;
    var top = oEvent.clientY - this.disY;
    
    //控制边界
    if(left < 0){
        left = 0;
    } else if(left > document.documentElement.clientWidth-this.oBox.offsetWidth){
        left = document.documentElement.clientWidth-this.oBox.offsetWidth;
    }
    if(top <= 0){
        top = 0;
    } else if(top > document.documentElement.clientHeight-this.oBox.offsetHeight){
        top = document.documentElement.clientHeight-this.oBox.offsetHeight;
    }
    
    this.oBox.style.left = left + 'px';
    this.oBox.style.top = top + 'px';
}

姜无忧

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
面向对象编程——案例篇（拖拽）

原始的面向过程代码：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;style&gt; #box { width: 100px; height: 10...
复制链接

扫一扫