引子 最近遇到一个需求,要求在移动端拖拽排序.简单搜了下要么体积太大,功能太多,要么不支持移动端.轮子走起.
需求示例
建立项目
首先按照轮子开发模板创建项目. 这个包我们将发布到npm上,这样项目直接add就可以,方便管理.
梳理需求细节
需求:
- 首先需要实现拖拽功能.
- 实现一个算法,用于判定排序.
- 最好同时兼容PC/移动端.
期望的使用方式:
- 类的使用方式
new Sorter(option) - 事件回调风格
sorter.on(event, callback) - 没有侵入性,不需要修改太多源码.
开发
创建基类
创建一个基类,用于实现一个简单的事件回调
class EmitAble {
task = {}
on(event, callback) {
this.task[event] = callback
}
fire(event, payload) {
this.task[event] && this.task[event](payload)
}
}
简单需求,简单实现.有更复杂的需求可以百度更完美的实现.
通过让真正的功能类继承这个基类就可以在内部通过this.fire(event, payload)向实例派发事件了.
算法实现
实际上浏览器已经为我们实现了一个自然排布+换行的排序规则.我们只需要考虑将一个数组(list)中的一个元素(source)插入目标元素(target)的实现就行.
// 取出被拖拽元素
let temp = list.splice(source, 1);
// 截取开头到被交换位置的元素
let start = list.splice(0, target);
// 组装成结果数组
this.list = [...start, ...temp, ...list];
落到浏览器的实现上,就是移动一个元素(source),在移动过程中更新target. 为了让这个过程可以被看到,我们可以在容器中添加一个占位元素,它的大小与被移动元素一致,而被移动元素则将其定位,使其脱离文档流,占位元素则根据以上算法及更新后的target反复取出插入到新的位置.
要点
- 如何更新target
我们知道,前端开发就是
摆盒子,既然是盒子,就有四边.而我们在移动一个盒子时,可以把这个移动盒子视作一个点,可以取鼠标的位置,也可以取盒子的中心点. 那么我们只需要对所有盒子进行检查,移动点命中的盒子就是target 现在这个问题抽象为一个点是否在一个盒子内.
isHit(point, rect) {
let {x, y} = point
let {left, top, right, bottom} = rect
return !(x < left || x > right || y < top || y > bottom)
}
let hitIndex = this.rectList.findIndex(rect => helper.isHit(point, rect))
-
dom操作性能如何? 我们可以实现惰性操作.只在必要时进行.也就是只在target变化时取出,插入dom
-
这么多盒子,如何整理它们的数据. 以容器即父元素为参照.所有盒子的位置均按其距离父元素的top/left计算. 提供一个方法用于获取所有子元素的位置信息.计算方式如下
getPosOfParent(el) {
let parent = el.parentNode
let pR = parent.getBoundingClientRect()
let cR = el.getBoundingClientRect()
return new Rect({
width: cR.width,
height: cR.height,
top: cR.top - pR.top,
left: cR.left - pR.left,
index: el.dataset.hasOwnProperty('index') ? +el.dataset.index : -1,
})
}
// Rect类
// 这样拖拽元素我们只需要更新它的top/left就可以了.
class Rect {
constructor(opt) {
Object.assign(this, opt)
}
get centerX() {
return this.left + this.width / 2
}
get centerY() {
return this.top + this.height / 2
}
get bottom() {
return this.top + this.height
}
get right() {
return this.left + this.width
}
}
主体框架
class Sorter extends EmitAble{
constructor(el, opt){
super()
this.$el = el
this.$options = {...initialOption, ...opt}
this.$init()
}
$init() {
this.freshThreshold()
this.listen()
}
freshThreshold() {
this.children = [...this.$el.children]
this.children.forEach((child, index) => {
child.classList.add('drag-item')
child.dataset.index = index
})
this.rectList = this.children.map(child => helper.getPosOfParent(child))
}
listen() {
this.$el.addEventListener(events.down, this.down)
this.$el.addEventListener(events.move, this.move)
document.addEventListener(events.up, this.up)
}
unbindListener(){}
down(){}
move(){}
up(){}
}
实现拖拽
我们的拖拽不需要考虑二次拖拽,比较简单.用transform的话,只需在move回调中,获取与down时的鼠标间距,设置给拖拽元素即可.
down: e => {
// 点击了可拖拽元素的子元素时,上溯到可拖拽元素
let target = this.drag = getParentByClassName(e.target, 'drag-item')
let {clientX, clientY} = e.touches ? e.touches[0] : e
let move = this.moveRect = helper.getPosOfParent(this.drag)
this.point = {
startX: clientX,
startY: clientY,
}
this.insetHolder(move.index)
}
move: e => {
e.preventDefault()
let {clientX, clientY} = e.touches ? e.touches[0] : e
let {startX, startY} = this.point
let deltaY = clientY - startY
let deltaX = clientX - startX
css(this.drag, {
transform: `translate3d(${deltaX}px,${deltaY}px,0)`,
})
}
但按上面提出的要点,我们需要在down回调,使拖拽元素脱离文档流,如设置绝对定位的话,则需将原本的位置加回来,或者设置定位时直接设置left,top. 同时,我们需要将一个占位元素,插入拖拽元素的位置.
insetHolder(index) {
let div = this.getHolder()
this.$el.insertBefore(div, this.$el.children[index])
}
getHolder() {
// 再次进入,则需要先从容器中取出.
if (this.$holderEl) return this.$el.removeChild(this.$holderEl)
let el = this.$holderEl = document.createElement('div')
let {width, height} = this.moveRect
el.className = 'sorter-holder'
el.style.width = width + 'px'
el.style.height = height + 'px'
el.style.background = '#f7f7f7'
return el
}
在move回调中,我们还需要反映拖拽产生的效应.也就是在合适的时机,调用insertHolder.
effectSibling() {
let move = this.moveRect
let point = {
x: move.centerX,
y: move.centerY,
}
// 找到移动块中心点进入了哪个块
let hitIndex = this.rectList.findIndex(rect => helper.isHit(point, rect))
if (hitIndex === -1) return
// 惰性操作.hitIndex没有变化,什么都不做
if (this.hidIndex === hitIndex) return
this.hidIndex = hitIndex
// 回到原位
if (hitIndex === move.index) {
this.insetHolder(move.index)
}
// 往左上移动
else if (hitIndex < move.index) {
this.insetHolder(hitIndex)
}
// 往右下移动
else {
this.insetHolder(hitIndex + 1)
}
}
完成拖拽
鼠标抬起时,拖拽结束,将一切复原.我们得到了一个dragIndex及一个hitIndex.
有了这两个值,即可按照最初的算法,真正的对元素进行排序
changeItem({source, target}) {
if (source === target) return;
const parent = this.$el;
let list = [...parent.children];
let temp = list.splice(source, 1);
let start = list.splice(0, target);
list = [...start, ...temp, ...list];
// 用fragment优化dom操作.
const frag = document.createDocumentFragment();
list.forEach(el => frag.appendChild(el));
parent.innerHTML = '';
parent.appendChild(frag);
// 刷新dragger实例
this.freshThreshold();
}
如果是使用MVVM框架开发,开发者往往希望得到数据结果之后,操作数据再做更改.因此可以使用fire对外派发结果.
同时提供一个配置参数用于控制是否执行内置排序功能.
this.fire('drag-over', pos)
this.$options.change && this.changeItem(pos)
这样实例就可以通过监听drag-over事件绑定回调.执行一些业务逻辑.
let sorter = new Sort(el, {change: false})
sorter.on('drag-over', pos => {
console.log(pos.source, pos.target)
// do something
})
