js实现拖拽效果(二):面向对象封装

1. 前言

上一篇文章中,已经实现了拖拽的效果,但并不利用复用,我们使用面向对象的方式,将代码重构一遍。

2. 代码

(function() {
    function Drag(selector) {
        // 传进来的如果是DOM对象则不用再查找
        this.elem = typeof selector == 'object' ? selector : document.querySelector(selector)
        // 鼠标在盒子内部的偏移
        this.innerDis = {} 
        this.init()
    }

    Drag.prototype = {
        constructor: Drag,
        init: function() {
            this.handleDrag()
        },
        getStyle: function(){
            return window.getComputedStyle(this.elem, null)
        },
        getTargetPos: function() {
            var elemStyle = this.getStyle()
            var pos = {
                x: parseInt(elemStyle.left.slice(0, -2)),
                y: parseInt(elemStyle.top.slice(0, -2))
            }
            return pos
        },
        setTargetPos: function(pos) {
            this.elem.style.left = pos.x
            this.elem.style.top = pos.y
            return this.elem
        },
        handleDrag: function() {
            var self = this
            function start(event) {
                var divPos = self.getTargetPos()
                // 鼠标按下的时候,记录鼠标在div内部的距离
                var innerDis = {
                    x: event.clientX - divPos.x,
                    y: event.clientY - divPos.y
                }
                self.innerDis = innerDis
                // 注意必须绑定在document对象上,如果绑定在box对象上,当鼠标脱快了移出box盒子时,就会产生BUG
                document.addEventListener('mousemove', move, false)
                document.addEventListener('mouseup', end, false)
            }

            function move(event) {
                // 拖动元素的新位置 = 鼠标移动到的新位置 - 鼠标在div的内部距离
                var pos = {
                    x: (event.clientX - self.innerDis.x) + 'px',
                    y: (event.clientY - self.innerDis.y) + 'px',
                }
                self.setTargetPos(pos)
            }

            function end() {
                document.removeEventListener('mousemove', move)
                document.removeEventListener('mouseup', end)
            }

            this.elem.addEventListener('mousedown', start)
        }
    }

    window.Drag = Drag
})()

new Drag('.box')

还可以写成jquery插件的形式

添加上代码

(function ($) {
  $.fn.extend({
    becomeDrag: function () {
      new Drag(this[0]);
      return this;   // 保证链式访问
    }
  })
})(jQuery);

$('.box').becomeDrag()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值