用类实现拖拽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指向并塞进去，实现方法本质是柯里化函数

总结下

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