js拖拽
js代码如下
/**
* @author yang
* @time 2021/4/15
* @return {postArr: [{left, top, zIndex, id}]} 该盒子内每个子元素的位置信息
* */
class Drag {
constructor(moveBox, moveItem, moveArea) {
this.moveBox = moveBox // 屏幕大盒子
this.moveItem = this.moveBox.getElementsByClassName(moveItem) // 盒子中元素
this.moveArea = moveArea //有效移动区域 {moveArea: string}
this.posArr = [] // 每个元素的位置信息
this.__init__()
}
__init__() {
this.dragEvent()
}
// 鼠标按下事件
dragEvent() {
// 通过bind改变this指向 未改变前this指向.wrapper dom元素, 改变后指向class Drag
this.moveBox.addEventListener('mousedown', this.handleMousedown.bind(this))
}
// 鼠标移动事件
handleMousedown(e) {
if (e.target.className == this.moveArea) { //在指定区域才能够拖拽
// 父级目标元素
let target = e.target.parentNode
// 鼠标位置
let mouseX = e.clientX
let mouseY = e.clientY
// 移动盒子位置
let itemLeft = e.target.parentNode.offsetLeft
let itemTop = e.target.parentNode.offsetTop
// 鼠标相对位置
let disX = mouseX - itemLeft
let disY = mouseY - itemTop
// 点击后监听鼠标移动事件
document.onmousemove = (e) => {
let left = e.clientX - disX
let top = e.clientY - disY
let zIndex = parseInt(new Date().getTime() / 1000) //当前盒子的z-index
target.style.left = left + 'px'
target.style.top = top + 'px'
target.style.zIndex = zIndex
// 边界判定
if (left <= 0) { //左右边界限定
left = 0
target.style.left = 0 + 'px'
} else if (left >= this.getInner().w - target.offsetWidth) { //元素在最右边时的判定,屏幕的宽度减去元素自身的宽度
left = this.getInner().w - target.offsetWidth;
target.style.left = left + 'px'
}
if (top <= 0) { //上下边界限定
top = 0;
target.style.top = 0 + 'px'
} else if (top >= this.getInner().h - target.offsetHeight) { //元素在最下边时的判定,屏幕的高度减去元素自身的高度
top = this.getInner().h - target.offsetHeight - 10;
target.style.top = top + 'px'
}
}
// 鼠标放开
document.onmouseup = (e) => {
document.onmousemove = null
document.onmouseup = null
this.getMoveItemsPos()
}
}
}
// 获取移动盒子的位置
getMoveItemsPos() {
this.posArr = [] //将上一次数据清空重新计算(如需优化需要改变指定项数据)
let len = this.moveItem.length
for (let i = 0; i < len; i++) {
let left = this.moveItem[i].style.left
let top = this.moveItem[i].style.top
let zIndex = this.moveItem[i].style.zIndex
let id = parseInt(this.moveItem[i].getAttribute('data-id'))
this.posArr.push({
x: left,
y: top,
z_index: zIndex,
id: id
})
}
}
// 外界获取位置列表
getPos() {
return this.posArr
}
//得到浏览器页面内容区窗口的大小 获取屏幕边界
getInner() {
if (typeof innerHeight == 'undefined') {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
} //IE浏览器适用
} else {
return {
w: innerWidth,
h: innerHeight
} //非IE浏览器适用
}
}
}
export default Drag