面向对象实例

时间：2021-05-08 17:22:48

上一节用面向对象的方法写了选项卡，这次我们来讲讲拖拽

面向过程的拖拽

拖拽主要是对位置的定义，绑定监听器监听鼠标移动的位置。

<!DOCTYPE html>
<html>
<head>
    <title>拖拽</title>
    <style type="text/css">
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var div = document.getElementById('div1');
            div.onmousedown = function (ev){
                var oEvent = ev||event;
                var disX = oEvent.clientX - div.offsetLeft;
                var disY = oEvent.clientY - div.offsetTop;
                document.onmouseover = function(ev){
                    div.style.left = oEvent.clientX - disX + 'px';
                    div.style.top = oEvent.clientY - disY + 'px'; 
                }
                document.onmouseup = function(){
                    document.onmouseover = null;
                    document.onmouseup = null;
                }
            }
        }

    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

面向对象的拖拽

<!DOCTYPE html>
<html>
<head>
    <title>拖拽</title>
    <style type="text/css">
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var a = new t();
        }
        function t() {
            var _this = this;
            this.div = document.getElementById('div1');
            this.disX = 0;
            this.disY = 0;

            this.div.onmousedown = function() {

                _this.mDown();
            }
        }
        t.prototype.mDown = function (ev) {  
               var _this = this;
               var oEvent = ev||event;
               this.disX = oEvent.clientX - this.div.offsetLeft;
               this.disY = oEvent.clientY - this.div.offsetTop;
               document.onmouseover = function() {
                   _this.mOver();
               }
               document.onmouseup = function(){
                   _this.mUp();
               };
        }
        t.prototype.mOver=function  (ev){
            var oEvent = ev||event;
            this.div.style.left = oEvent.clientX - this.disX + 'px';
            this.div.style.top = oEvent.clientY - this.disY + 'px'; 
        }
        t.prototype.mUp = function() {
            document.onmouseover = null;
            document.onmouseup = null;
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

注意点

  • 因为mouseover和mouseup是嵌套在mousedown里面的，所以需要在mousedown里面再去定义一次this，不然会报错"_this is not defeined"
  • document.onmouseove是针对整个网页的，所以不需要加上this
标签：

相关文章