js面向对象对象的拖拽

这个我很傻很天真, 我天真的认为,可以通过es6 写法,可以解决this问题,结果发现不行!

 

看如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #box {
            position: absolute;
            left:50px;
            top:50px;;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

        <script>
            // oop 真的很难写,我试试!原始的写法,this 指针问题,特别难折腾,还好有了es6,所以我用es6 写
            // 真心搞不定 es6
            class Drag{
                constructor(id){
                    
                    this.dx =0;
                    this.dy = 0;
                    // 得到目标对象
                     this.target = document.getElementById(id);
                     var that = this;
                     this.target.onmousedown = function(ev){
                         that.mdown(ev);
                     }
                  
                }

                mdown(ev){
                    console.log(this);
                    var oEvent = ev|| window.event;
                    this.dx = oEvent.clientX - this.target.offsetLeft;
                    this.dy = oEvent.clientY-this.target.offsetTop;
                    console.log(this.dx,this.dy);
                } 

            }        

            window.onload = function (){
                new Drag('box');
            }
        </script>        
</head>
<body>
    <div id="box">

    </div>


</body>
</html>

点击事件的this 指针,需要处理下!

 

初步的处理就很不错!

我接着写其它的逻辑

  // oop 真的很难写,我试试!原始的写法,this 指针问题,特别难折腾,还好有了es6,所以我用es6 写
            // 真心搞不定 es6
            class Drag{
                constructor(id){
                    
                    this.dx =0;
                    this.dy = 0;
                    // 得到目标对象
                     this.target = document.getElementById(id);
                     var that = this;
                     this.target.onmousedown = function(ev){
                         that.mdown(ev);
                         return false;
                     }

                     document.onmouseup = function(ev){
                        that.mup(ev);
                     }
                  
                }

                mup(ev){
                    document.onmousemove = null;
                    this.target.onmouseup = null;
                }
                mdown(ev){
                    console.log(this);
                    var oEvent = ev|| window.event;
                    this.dx = oEvent.clientX - this.target.offsetLeft;
                    this.dy = oEvent.clientY-this.target.offsetTop;
                    var that = this;
                    // console.log(this.dx,this.dy);
                    document.onmousemove = function(ev){
                          // 又出现this问题
                          that.mmove(ev);// 照样处理下!  
                    }

                    
                } 

                mmove(ev){
                    var oEvent = ev|| window.event;
                    var x = oEvent.clientX - this.dx;
                    var y = oEvent.clientY- this.dy;
                    this.target.style.left = x + "px";
                    this.target.style.top = y + 'px';

                }

            }        

看到没, this. 处理起来是相当的麻烦,这就是我学js面向对象的感受!

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我来为您解答。 局部拖拽与全局拖拽的区别在于,局部拖拽只能在指定范围内拖动元素,而全局拖拽可以在整个文档范围内拖动元素。 下面是使用面向对象的方法实现局部拖拽的代码: ```javascript function Drag(element) { this.element = element; // 需要拖拽的元素 this.dragging = false; // 记录是否正在拖拽 this.offsetX = 0; // 记录鼠标点击位置与拖拽对象左上角的距离 this.offsetY = 0; } Drag.prototype.init = function() { var self = this; this.element.onmousedown = function(event) { self.dragging = true; self.offsetX = event.clientX - self.element.offsetLeft; self.offsetY = event.clientY - self.element.offsetTop; }; document.onmousemove = function(event) { if (self.dragging) { var left = event.clientX - self.offsetX; var top = event.clientY - self.offsetY; var maxLeft = document.documentElement.clientWidth - self.element.offsetWidth; var maxTop = document.documentElement.clientHeight - self.element.offsetHeight; left = Math.max(Math.min(left, maxLeft), 0); top = Math.max(Math.min(top, maxTop), 0); self.element.style.left = left + 'px'; self.element.style.top = top + 'px'; } }; document.onmouseup = function(event) { self.dragging = false; }; }; ``` 在这个实现中,我们首先创建了一个 Drag 对象,并传入需要拖拽的元素作为参数。在 init 方法中,我们为元素的 mousedown、mousemove 和 mouseup 事件分别绑定了处理函数。当鼠标按下时,设置 dragging 为 true,并记录鼠标点击位置与元素左上角的距离;当鼠标移动时,如果正在拖拽,则根据当前鼠标位置和点击位置以及元素左上角的位置计算出新的位置,并设置为元素的 left 和 top 属性。需要注意的是,我们在计算新位置时,要确保元素不会超出指定的范围。最后,在鼠标抬起时,设置 dragging 为 false。 接着,我们可以通过上面定义的 Drag 对象来实现局部拖拽: ```javascript var element = document.getElementById('element'); var drag = new Drag(element); drag.init(); ``` 在上面的代码中,我们首先获取需要拖拽的元素,然后创建一个 Drag 对象,并调用 init 方法来初始化拖拽效果。 希望我的回答对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值