You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.4 KiB
94 lines
2.4 KiB
// 获取相关CSS属性
|
|
const getCss = function (o, key) {
|
|
return o.currentStyle
|
|
? o.currentStyle[key]
|
|
: document.defaultView?.getComputedStyle(o, null)[key]
|
|
}
|
|
|
|
const params = {
|
|
left: 0,
|
|
top: 0,
|
|
currentX: 0,
|
|
currentY: 0,
|
|
flag: false,
|
|
}
|
|
|
|
const startDrag = function (bar, target, callback?) {
|
|
const screenWidth = document.body.clientWidth // body当前宽度
|
|
const screenHeight = document.documentElement.clientHeight // 可见区域高度
|
|
|
|
const dragDomW = target.offsetWidth // 对话框宽度
|
|
const dragDomH = target.offsetHeight // 对话框高度
|
|
|
|
const minDomLeft = target.offsetLeft
|
|
const minDomTop = target.offsetTop
|
|
|
|
const maxDragDomLeft = screenWidth - minDomLeft - dragDomW
|
|
const maxDragDomTop = screenHeight - minDomTop - dragDomH
|
|
|
|
if (getCss(target, 'left') !== 'auto')
|
|
params.left = getCss(target, 'left')
|
|
|
|
if (getCss(target, 'top') !== 'auto')
|
|
params.top = getCss(target, 'top')
|
|
|
|
// o是移动对象
|
|
bar.onmousedown = function (event) {
|
|
params.flag = true
|
|
if (!event) {
|
|
event = window.event
|
|
// 防止IE文字选中
|
|
bar.onselectstart = function () {
|
|
return false
|
|
}
|
|
}
|
|
const e = event
|
|
params.currentX = e.clientX
|
|
params.currentY = e.clientY
|
|
}
|
|
document.onmouseup = function () {
|
|
params.flag = false
|
|
if (getCss(target, 'left') !== 'auto')
|
|
params.left = getCss(target, 'left')
|
|
|
|
if (getCss(target, 'top') !== 'auto')
|
|
params.top = getCss(target, 'top')
|
|
}
|
|
document.onmousemove = function (event) {
|
|
const e: any = event || window.event
|
|
if (params.flag) {
|
|
const nowX = e.clientX
|
|
const nowY = e.clientY
|
|
const disX = nowX - params.currentX
|
|
const disY = nowY - params.currentY
|
|
|
|
let left = Number.parseInt(params.left) + disX
|
|
let top = Number.parseInt(params.top) + disY
|
|
|
|
// 拖出屏幕边缘
|
|
if (-left > minDomLeft)
|
|
left = -minDomLeft
|
|
else if (left > maxDragDomLeft)
|
|
left = maxDragDomLeft
|
|
|
|
if (-top > minDomTop)
|
|
top = -minDomTop
|
|
else if (top > maxDragDomTop)
|
|
top = maxDragDomTop
|
|
|
|
target.style.left = `${left}px`
|
|
target.style.top = `${top}px`
|
|
|
|
if (typeof callback == 'function')
|
|
callback((Number.parseInt(params.left) || 0) + disX, (Number.parseInt(params.top) || 0) + disY)
|
|
|
|
if (event.preventDefault)
|
|
event.preventDefault()
|
|
|
|
return false
|
|
}
|
|
}
|
|
}
|
|
|
|
export default startDrag
|