前端小白用面向对象思想实现元素拖拽

最新推荐文章于 2024-10-04 00:46:18 发布

weixin_34068198

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量86

点赞数

文章标签：前端 ViewUI

原文链接：https://segmentfault.com/a/1190000009015663

版权

上篇文章分享了如何用面向对象思想编写选项卡，在文章最后留了一个拖拽的例子，希望大家可以试着写一下，现在我就谈谈我在这过程中遇到的一些问题和解决方法。（本文主要是想和js初学者分享经验，代码中的更改this指向，事件绑定均采用的比较初级的方法，也希望能有大神能指导，分享一下经验）。

现在我们来看看面向过程式的编程的代码，HTML只有一个div元素，设置宽高和背景颜色。

#div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
<body>
    <div id='div1'></div>
</body>
window.onload=function(){
            var oDiv=document.getElementById('div1');
            
            var disX=0;
            var disY=0;

            oDiv.onmousedown=function(ev){
                var ev=ev || window.event;
                disX=ev.clientX-oDiv.offsetLeft;
                disY=ev.clientY-oDiv.offsetTop;

                document.onmousemove=function(ev){
                    var ev=ev || window.event;
                    oDiv.style.left=ev.clientX-disX+'px';
                    oDiv.style.top=ev.clientY-disY+'px';
                };
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                }
                return false;
            }
        }

还是用上一篇文章提到的方法，先将变量和方法提取出来，不要出现函数的嵌套，出现嵌套的将其中的函数提取出来。变量为oDiv,disX和disY,我将代码中的三个事件绑定的函数命名为fnDown,fnMove,fnUp,因此将上面的代码改为如下格式：

var oDiv,disX,disY;
        window.onload=function(){
            oDiv=document.getElementById('div1');
            
            disX=0;
            disY=0;
            oDiv.onmousedown=fnDown();
        }
        
        
        function fnDown(ev){
            var ev=ev || window.event;
            disX=ev.clientX-oDiv.offsetLeft;
            disY=ev.clientY-oDiv.offsetTop;
            document.onmousemove=fnMove();
            document.onmouseup=fnUp();
            return false;
        }
        function fnMove=function(ev){
                var ev=ev || window.event;
                oDiv.style.left=ev.clientX-disX+'px';
                oDiv.style.top=ev.clientY-disY+'px';
            };
        function fnUp=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }

然后用面向对象的思想将属性和方法添加到对象中，并在属性和方法前面加上this，因此改变的代码如下：

window.onload=function(){
        var d1=new Drag('div1');
        d1.init();
    };
    function Drag(id){
        this.oDiv=document.getElementById(id);
        this.disX=0;
        this.disY=0;
    };
    Drag.prototype.init=function(){
        this.oDiv.onmousedown=this.fnDowm();
    };
    Drag.prototype.fnDowm=function(ev){
        var ev=ev || window.event;
        this.disX=ev.clientX-this.oDiv.offsetLeft;
        this.disY=ev.clientY-this.oDiv.offsetTop;
        document.onmousemove=this.fnMove();
        document.onmouseup=this.fnUp();
        return false;
    };

    Drag.prototype.fnMove=function(ev){
        var ev || window.event;
        this.oDiv.style.left=ev.clientX-this.disX+'px';
        this.oDiv.style.top=ev.clientY-this.disY+'px';
    };

    Drag.prototype.fnMove=function(){
        document.onmousemove=null;
        document.onmouseup=null;
    };

和前面一样，找出其中this的指向错误并改正。但是除了this指向问题，上面还有一个关于事件的问题。document.onmousemove=this.fnMove();，向这样在事件上添加方法的方式是不正确的，正确的调用方式是这样：document.onmousemove=function(ev){};,因此将方法改为以下形式。

Drag.prototype.init=function(){
            
            this.oDiv.onmousedown=function(ev){
                var ev=ev || window.event;
                this.fnDown(ev);
                return false;
            };
        };

        Drag.prototype.fnDown = function(ev){
            
            this.disX = ev.clientX - this.oDiv.offsetLeft;
            this.disY = ev.clientY - this.oDiv.offsetTop;
                
            document.onmousemove = function(ev){
                var ev = ev || window.event;
                this.fnMove(ev);
            };
            document.onmouseup=function(){
                this.fnUp();
            }
        };


        Drag.prototype.fnMove=function(ev){
            
            this.oDiv.style.left=ev.clientX-this.disX+'px';
            this.oDiv.style.top=ev.clientY-this.disY+'px';
        };
        
        Drag.prototype.fnUp=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        };

最后要找到错误的this指向，并改正。关于this指向，我认为最简单的方法就是看函数是怎么调用的，函数名 '.' 左边的就是this的指向。下面我们来举个例子：

Drag.prototype.init=function(){
            
            this.oDiv.onmousedown=function(ev){
                var ev=ev || window.event;
                this.fnDown(ev);
                return false;
            };
        };

原型上面的init()方法的调用方式是d1.init()，因此函数内的this指向就是d1，那么this.oDiv指向就是正确的，但是onmouseover()的调用方式是this.oDiv.onmousedown，其内部this指向就是this.oDiv，而在该函数内部，this.fnDown(ev)语句this指向是oDiv，而oDiv是没有方法和属性的，因此这里的this指向就是错误的，需要修正。
下面的几个方法中this也这来来分析，并将其改为正确的指向。修改this的指向还是和上一篇修改的方法一样。因此改完后代码为：

window.onload=function(){

            var d1=new Drag('div1');
            d1.init();

        };

        function Drag(id){
            this.oDiv=document.getElementById(id);
            this.disX=0;
            this.disY=0;
        }
        Drag.prototype.init=function(){
            var This=this;
            this.oDiv.onmousedown=function(ev){
                var ev=ev || window.event;
                This.fnDown(ev);
                return false;
            };
        };

        Drag.prototype.fnDown = function(ev){
            var This = this;
            this.disX = ev.clientX - this.oDiv.offsetLeft;
            this.disY = ev.clientY - this.oDiv.offsetTop;
                
            document.onmousemove = function(ev){
                var ev = ev || window.event;
                This.fnMove(ev);
            };
            document.onmouseup=function(){
                This.fnUp();
            }
        };


        Drag.prototype.fnMove=function(ev){
            
            this.oDiv.style.left=ev.clientX-this.disX+'px';
            this.oDiv.style.top=ev.clientY-this.disY+'px';
        };
        
        Drag.prototype.fnUp=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        };

这样就可以正常运行了。

作为一名小白，就应该多动脑，多动手。在这过程中你会学到很多。通过以上方法来训练面向对象的编程思想，多练习，以后写出面向对象思想的代码就很简单了。

因为以上代码也是我通过看视频学的，所以还有点疑问，希望有人能解答一下。上面只有onmousedown时间是绑定在oDiv上，后面的时间都是绑定在document上，我试着将后面的事件也绑定在oDiv中，程序也能运行，但是快速拖动就会产生停顿的问题，而在document上就没有类似的情况，这是为什么？

weixin_34068198

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫