持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

一、前言

前两篇讲完了面向对象的核心,今天讲如何利用面向对象实现一些功能,此篇也为面向对象的完结篇。

二、利用面向对象实现拖拽功能

拖拽功能在我们封装组件的时候还是会常用到，今天就用面向对象的写法来完成。

1.分析

首先我们要先有一个思路(怎么达到拖拽效果)：

建立一个对象中心：获取需要移动的对象
我需要的方法：需要鼠标按下、需要移动方法、、需要鼠标抬起、需要计算移动坐标
我需要做的事：我需要鼠标按下的时候调用按下的方法，同时获取当前坐标然后去移动的时候调用移动方法计算坐标，移动当鼠标抬起时调用抬起的方法清空鼠标移动和抬起。

2.效果图

3.代码实现

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

<script>
       //首先有一个主体的构造函数，去围绕它展开
       function Box(ID){
         //构造函数的this指向实例化对象
         this.oBox = document.getElementById(ID)
         var that = this
         this.oBox.onmousedown = function(e){
           that.down(e)
         }
       }

        //从构造函数上添加一个按下的方法
        Box.prototype.down = function(e){
        //原型对象中的方法的this指向实例化对象
         this.mouseToBox = {
            x: e.offsetX,
            y: e.offsetY
           }
        var that = this;
        //调用移动方法
        document.onmousemove = function (e) {
            that.move(e);
        }
        //调用抬起方法
        document.onmouseup = function () {
            that.up();
        }
        }

        //从构造函数上添加一个移动的方法
        Box.prototype.move = function(e){
          var boxLoaction = {
            x: e.clientX - this.mouseToBox.x,
            y: e.clientY - this.mouseToBox.y,
            }
           this.oBox.style.left = boxLoaction.x + "px";
           this.oBox.style.top = boxLoaction.y + "px";
        }

        //从构造函数上添加一个抬起的方法
        Box.prototype.up= function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
        new Box("box")
</script>

<style>
     #box{
       position: absolute;
       left: 0;
       top: 0;
       width:100px;
       height:100px;
       border: 1px solid #ccc;
       background:pink;
     }
</style>

三、关于面向对象的总结

面向对象分为了三篇来讲，首先是概念到对象的声明再到面向对象的核心最后再到今天的实例，总算是把面向对象给捋了一遍，这三篇也是我的一些个人理解，如有错误则是我对其理解的不到位，请及时指出，另外附上之前两篇链接如下：

好了，以上就是本篇文章的分享，感谢阅读！

JavaScript | 教你如何理解面向对象(三)