手把手教写拖拽布局插件（拖拽功能篇）

实现拖拽

实现拖拽的原理很简单：

鼠标在domEl上按下，拖拽开始，此时记录鼠标按下的位置
鼠标在window上移动时，计算当前的鼠标位置和按下时的初始位置，将坐标相减得到差值，将这个差值加到现有的 top 和 left 属性上

因此我绑定四个事件：

在domEl上绑定mousedown事件，用于记录当鼠标点下的位置，和将代表拖拽中的isdragging置为true:

function onMousedown(e) {this.dragOrign.x = e.pageXthis.dragOrign.y = e.pageYthis.isdragging = true
}//为了onMousedown方法可以使用this而使用了bind
this.bindMousedown = onMousedown.bind(this)//之所以这样写是为了方便注销这个事件
this.domEl.addEventListener("mousedown",this.bindMousedown)

在window上绑定mousemove事件，用于更新domEl的位置和this.config的配置，之所以不绑定在domEl上是因为在移动鼠标的时候，经常会不小心将鼠标移出当前正在拖动的元素，体验不是很好

function onMousemove(e) {if(this.isdragging){const moveX = e.pageX - this.dragOrign.xconst moveY = e.pageY - this.dragOrign.ylet newX = this.x.num + moveXlet newY = this.y.num + moveY//domEl是否可以拖拽出父元素if(!this.dragOutable){const maxX = this.parentElWidth - this.width.numconst maxY = this.parentElHeight - this.height.numconst minX = 0const minY = 0if(newX < minX) {newX = minX}if(newX > maxX) {newX = maxX}if(newY < minY) {newY = minY}if(newY > maxY) {newY = maxY}}this.x.num = newXthis.y.num = newYthis.dragOrign.x = e.pageXthis.dragOrign.y = e.pageYthis._setStyle()this._updatePositionConfig()}
}/**
* 更新config的width和height,x,y参数
*/
this._updatePositionConfig = function() {this.config.x = getSizeText(this.x,this.parentElWidth)this.config.y = getSizeText(this.y,this.parentElHeight)this.config.width = getSizeText(this.width,this.parentElWidth)this.config.height = getSizeText(this.height,this.parentElHeight)
}
/**
* 设置元素样式
*/
this._setStyle = function() {this.domEl.style.position = 'absolute'this.domEl.style.left = this.x.num + 'px'this.domEl.style.top = this.y.num + 'px'this.domEl.style.width = this.width.num + 'px'this.domEl.style.height = this.height.num + 'px'
}this.bindMouseMove = onMousemove.bind(this)
window.addEventListener("mousemove",this.bindMouseMove)

在window上绑定mouseleave事件，移出window之后就不能再拖拽

function onMouseleave(e) {if(this.isdragging) {this.isdragging = false}
}
this.bindMouseLeave = onMouseleave.bind(this)
window.addEventListener("mouseleave",this.bindMouseLeave,false)

在window上绑定mouseup事件，鼠标松开后也不能再拖拽

function onMouseup(e) {this.isdragging = false
}
this.bindMouseUp = onMouseup.bind(this)
window.addEventListener("mouseup",this.bindMouseUp)

销毁整个实例时需要注销掉这几个事件：

function removeDragMethods() {this.domEl.removeEventListener("mousedown",this.bindMousedown)window.removeEventListener("mousemove",this.bindMouseMove)window.removeEventListener("onMouseleave",this.bindMouseLeave)window.removeEventListener("mouseup",this.bindMouseUp)
}//Accelerator的destroy方法做一下修改
destroy() {clearInterval(this.watchParentInterval)removeDragMethods(this)this.watchParentInterval = nullconst index = Accelerator._instanceList.findIndex((instance) => { return this.id === instance.id })Accelerator._instanceList.splice(index,1)
}

代码分割

拖拽的几个事件一加代码可读性立马就变差了，由于我需要的仅仅只是两个操作，注册拖拽相关事件，和注销拖拽相关事件，所以我可以将拖拽的方法都抽出去，仅仅暴露两个注册和注销的方法出来：
创建src/accelerator/drag.js:

export function onMousedown(e) {//...
}export function onMousemove(e) {//...
}export function onMouseleave(e) {//...
}export function onMouseup(e) {//...
}export function setDragMethods(_this) {if(_this.dragable){_this.bindMousedown = onMousedown.bind(_this)_this.domEl.addEventListener("mousedown",_this.bindMousedown)_this.bindMouseMove = onMousemove.bind(_this)window.addEventListener("mousemove",_this.bindMouseMove)_this.bindMouseLeave = onMouseleave.bind(_this)window.addEventListener("mouseleave",_this.bindMouseLeave,false)_this.bindMouseUp = onMouseup.bind(_this)window.addEventListener("mouseup",_this.bindMouseUp)}
}export function removeDragMethods(_this) {_this.domEl.removeEventListener("mousedown",_this.bindMousedown)window.removeEventListener("mousemove",_this.bindMouseMove)window.removeEventListener("onMouseleave",_this.bindMouseLeave)window.removeEventListener("mouseup",_this.bindMouseUp)
}

定义在Accelerator上的静态属性和方法也有点碍眼，新建src/accelerator/registerStatic.js

export function registerStaticMethod (Accelerator) {Accelerator.ID = 1Accelerator.x = 0;Accelerator.y = 0;Accelerator.width = '100px'Accelerator.height = '100px'Accelerator.autoCount = falseAccelerator.dragable = trueAccelerator.dragOutable = trueAccelerator._instanceList = []/*** * @param {*} config 设置Accelerator的静态属性*/Accelerator.setStaticConfig = function (config){Accelerator.x = config.x || Accelerator.xAccelerator.y = config.y || Accelerator.yAccelerator.width = config.width || Accelerator.widthAccelerator.height = config.height || Accelerator.heightAccelerator.autoCount = config.autoCount || Accelerator.autoCountAccelerator.dragable = config.dragable || Accelerator.dragableAccelerator.dragOutable = config.dragOutable || Accelerator.dragOutable}/*** 销毁所有Accelerator实例*/Accelerator.destroyAll = function() {for(let i = 0;i < Accelerator._instanceList.length; i++){const instance = Accelerator._instanceList[i]instance.destroy()i--}}
}

然后在src/accelerator/index.js中调用：

import { registerStaticMethod } from './registerStatic'
import {setDragMethods,removeDragMethods
} from './drag'class Accelerator {/*** * @param {*} domEl dom元素，必传* @param {*} config  配置项*/constructor(domEl,config = {}){//...this._init()}/*** 初始化元素的大小和位置，并且刷新Accelerator上的静态参数*/_init(){//...//设置拖拽setDragMethods(this)}//...destroy() {//...removeDragMethods(this)}
}registerStaticMethod(Accelerator)window.Accelerator = Accelerator
export default Accelerator

attr()方法更改属性值

一般实例化传入的配置都是可以在后面改动的，改配置的同时页面上渲染的也应该实时改变。

先设计一下attr()方法：
1.有两个参数attrName和attrValue,attrName是要更改的属性名，attrValue是属性值，使用方法类似下面：

const domEl = document.createElement('div')
const Ac = new accelerator(domEl)
Ac.attr('x','10%')

2.如果attrValue没有传的话就返回这个属性绑定的值：

Ac.attr('x') //'10%'

3.如果attrName传入的是一个Object对象，就将这个对象的值更新到this.config上，例如：

Ac.attr({x:'20%',y:'20%'
})

逻辑整理完毕，代码如下：

/**
*
* @param { string | object } } attrName 属性名 或 object类型的属性及属性值
* @param {*} attrValue 属性值
*/
attr(attrName, attrValue = ''){//先判断attrName的类型const type = typeof(attrName)const orignDragable = this.dragableif(type === 'string'){//字符串的话就验证第二个attrValue的值if(attrValue || attrValue === false) {//不为空就重新设置一下这个值if(attrName!='id') {this.config[attrName] = attrValue}} else {//attrValue为空就返回attrName这个参数的值return this.config[attrName]}}else if(type === 'object'){//attrName为Object//设置this.config//不允许改变idif(attrName.id) {delete attrName.id}this.config = {...this.config,...attrName}}//重新计算参数值this._computedConfig(this.config)//重新设置位置this._setStyle()//其他控制方面的参数变化if(this.dragable != orignDragable) {if(this.dragable){setDragMethods(this)}else{removeDragMethods(this)}}
}

示例

最后写个例子验证一下，老规矩不放代码，看一下效果：