此处例子获取的盒子(div)为 element-ui 的 dialog 组件
青铜版(参考)
function moveDialog() {
let isDown = false,
x = 0,
y = 0,
left = 0,
top = 0,
el_dialog = document.querySelector('.el-dialog'),
dia_header = el_dialog.querySelector('.el-dialog__header'),
dia_footer = el_dialog.querySelector('.el-dialog__footer')
// 鼠标按下
dia_header.onmousedown = function (e) {
// 获取x坐标和y坐标
x = e.clientX
y = e.clientY
// 获取左边和上边的偏移量
left = el_dialog.offsetLeft
top = el_dialog.offsetTop
// 开关
isDown = true
dia_header.style.cursor = 'grabbing'
}
dia_footer.onmousedown = function (e) {
// 获取x坐标和y坐标
x = e.clientX
y = e.clientY
// 获取左边和上边的偏移量
left = el_dialog.offsetLeft
top = el_dialog.offsetTop
// 开关
isDown = true
dia_footer.style.cursor = 'grabbing'
}
// 鼠标移动
document.onmousemove = function (e) {
if (!isDown) return
// 移动后位置
let nx = e.clientX
let ny = e.clientY
// 移动距离
let yd_x = x - nx
let yd_y = y - ny
// 左右
if (yd_x > 0) {
if (nx > 100) el_dialog.style.marginLeft = left - yd_x + 'px'
} else {
if (nx < document.body.clientWidth - 100) el_dialog.style.marginLeft = left + -yd_x + 'px'
}
// 上下
if (yd_y > 0) {
if (ny > 30) el_dialog.style.marginTop = top - yd_y + 'px'
} else {
if (ny < document.body.clientHeight - 30) el_dialog.style.marginTop = top + -yd_y + 'px'
}
}
// 鼠标抬起
document.onmouseup = function () {
// 开关关闭
isDown = false
dia_header.style.cursor = 'grab'
dia_footer.style.cursor = 'grab'
}
}
moveDialog()
大佬版(参考)
function moveBox(box, item) {
var isDragging = false
var currentX
var currentY
var initialX
var initialY
var xOffset = 0
var yOffset = 0
box.addEventListener('mousedown', dragStart)
box.addEventListener('mouseup', dragEnd)
function dragStart(e) {
initialX = e.clientX - xOffset
initialY = e.clientY - yOffset
if (e.target === item) {
isDragging = true
document.addEventListener('mousemove', drag)
}
}
function dragEnd(e) {
initialX = currentX
initialY = currentY
isDragging = false
document.removeEventListener('mousemove', drag)
}
function drag(e) {
if (isDragging) {
e.preventDefault()
currentX = e.clientX - initialX
currentY = e.clientY - initialY
xOffset = currentX
yOffset = currentY
setTranslate(currentX, currentY, box)
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)'
}
}
let el_dialog = document.querySelector('.el-dialog')
let dia_header = el_dialog.querySelector('.el-dialog__header')
moveBox(el_dialog, dia_header)
项目使用版
function moveBox(box, item) {
let isDown = false,
x,
y,
newX,
newY,
ydX,
ydY,
left = 0,
top = 0
item.onmousedown = (e) => {
item.style.cursor = 'grabbing'
x = e.clientX
y = e.clientY
left = box.offsetLeft
top = box.offsetTop
isDown = true
document.addEventListener('mousemove', drag)
}
item.onmouseup = (e) => {
item.style.cursor = 'grab'
isDown = false
document.removeEventListener('mousemove', drag)
}
function drag(e) {
if (isDown) {
newX = e.clientX
newY = e.clientY
ydX = newX - x
ydY = newY - y
box.style.marginLeft = left + ydX + 'px'
box.style.marginTop = top + ydY + 'px'
}
}
}
let el_dialog = document.querySelector('.el-dialog')
let dia_header = el_dialog.querySelector('.el-dialog__header')
moveBox(el_dialog, dia_header)