用类实现拖拽div

用class实现可拖拽的div(之前在虚拟机上写的代码把搬过来)

主要技术

• es6
• 继承
• 定位
• reset css(重置bodycss)

思路

其实很简单点击记录状态，放手状态重置，先上代码在说下遇到的问题

<div id='div1' class='move left'></div>
<div id='div2' class='move right'></div>

body{
    width: 100%;   
}
.move {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    box-sizing: boder-box;
    position: absolute
}
.left: {
    left: 0
}
.right: {
    right: 0
}

    class Movediv{
        constructor(el) {
            this.div = document.querySelector(el);
            this.init()
        }
        init() {
            this.div.onmousedown = function(e){
                this.x = e.clientX - this.div.offsetLeft
                this.y = e.clientY - this.div.offsetTop
                document.onmousemove = this.fnmove.bind(this)
                document.onmouseup = this.fnup.bind(this)
            }.bind(this)
        }
        fnmove(e) {
            this.div.style.left = (e.clientX - this.x) + 'px'
            this.div.style.top = (e.clientY - this.y) + 'px'
        }
        fnup(e) {
            document.onmousemove = null
            document.onmouseup = null
        }
    }

上面的js就是类实现可以拖拽的DIV，提一个新需求，拖拽的div左右不能超过左右范围

这就用到类继承的概念了

    class Movediv1 extends  Movediv {
        <!--这个样子基本就是继承movediv里面所有的方法-->
        <!--但是我们同时需要改写fnmove方法-->
        fnmove(e) {
            <!--保留父的-->
            super.fnmove(e)
            this.maxWidth = document.body.clientWidth;
            if(parsenInt(this.div.style.left) <= 0) {
                this.div.style.left = 0
            } else if(parseInt(this.div.style.left) >= (parseInt(this.maxWidth - 100))){
                this.div.style.left = (this.maxWidth - 100) + 'px'
            }
        }
    }

提几个比较容易犯错误的地方

1. 鼠标的移动事件不能放在div上面来做会事件捕捉不到，只能放document
2. body的大小一定要在初始的时候reset下不然你会发现body的大小和html的大小不一致，导致document.body.clientWidth并不是你想要的结果
3. 关于super.fnmove一定要不写的话你会把父的方法冲掉，吃点亏就懂了
4. bind方法实现方法可以看看改变this指向并塞进去，实现方法本质是柯里化函数

总结下

看到的某年腾讯的前端面试题，顺便实现了下，内容虽小里面用的东西还是蛮多的，关于类，继承等方法，好好学习