|
|
@ -19,6 +19,8 @@ Vue.directive('drag', { |
|
|
})() |
|
|
})() |
|
|
|
|
|
|
|
|
dialogHeaderEl.onmousedown = (e) => { |
|
|
dialogHeaderEl.onmousedown = (e) => { |
|
|
|
|
|
// 获取鼠标按下时的坐标
|
|
|
|
|
|
e.preventDefault(); |
|
|
// 鼠标按下,计算当前元素距离可视区的距离
|
|
|
// 鼠标按下,计算当前元素距离可视区的距离
|
|
|
const disX = e.clientX - dialogHeaderEl.offsetLeft; |
|
|
const disX = e.clientX - dialogHeaderEl.offsetLeft; |
|
|
const disY = e.clientY - dialogHeaderEl.offsetTop; |
|
|
const disY = e.clientY - dialogHeaderEl.offsetTop; |
|
|
@ -50,12 +52,14 @@ Vue.directive('drag', { |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
document.onmousemove = function (e) { |
|
|
document.onmousemove = function (e) { |
|
|
|
|
|
// 移动时禁止默认事件
|
|
|
|
|
|
e.preventDefault(); |
|
|
// 通过事件委托,计算移动的距离
|
|
|
// 通过事件委托,计算移动的距离
|
|
|
let left = e.clientX - disX; |
|
|
let left = e.clientX - disX; |
|
|
let top = e.clientY - disY; |
|
|
let top = e.clientY - disY; |
|
|
|
|
|
|
|
|
// 边界处理
|
|
|
// 边界处理
|
|
|
if (-(left) > minDragDomLeft) { |
|
|
|
|
|
|
|
|
/* if (-(left) > minDragDomLeft) { |
|
|
left = -(minDragDomLeft); |
|
|
left = -(minDragDomLeft); |
|
|
} else if (left > maxDragDomLeft) { |
|
|
} else if (left > maxDragDomLeft) { |
|
|
left = maxDragDomLeft; |
|
|
left = maxDragDomLeft; |
|
|
@ -65,10 +69,39 @@ Vue.directive('drag', { |
|
|
top = -(minDragDomTop); |
|
|
top = -(minDragDomTop); |
|
|
} else if (top > maxDragDomTop) { |
|
|
} else if (top > maxDragDomTop) { |
|
|
top = maxDragDomTop; |
|
|
top = maxDragDomTop; |
|
|
|
|
|
}*/ |
|
|
|
|
|
// 设置最大和最小可拖动范围
|
|
|
|
|
|
const viewportWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; |
|
|
|
|
|
const viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; |
|
|
|
|
|
|
|
|
|
|
|
let minLeft = 0; |
|
|
|
|
|
let maxLeft = viewportWidth - dragDom.offsetWidth; |
|
|
|
|
|
|
|
|
|
|
|
let minTop = 0; |
|
|
|
|
|
let maxTop = viewportHeight - dragDom.offsetHeight; |
|
|
|
|
|
|
|
|
|
|
|
if (dragDom.offsetHeight > viewportHeight) { |
|
|
|
|
|
// 只有当内容过高时才放宽顶部限制
|
|
|
|
|
|
minTop = Math.max( |
|
|
|
|
|
-(dragDom.offsetHeight - 100), // 至少保留 100px 高度可见
|
|
|
|
|
|
-(dragDom.offsetHeight - viewportHeight) |
|
|
|
|
|
); |
|
|
|
|
|
maxTop = 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 应用边界限制
|
|
|
|
|
|
// left = Math.max(minLeft, Math.min(left, maxLeft));
|
|
|
|
|
|
top = Math.max(minTop, Math.min(top, maxTop)); |
|
|
|
|
|
|
|
|
|
|
|
// 应用新的边界限制
|
|
|
|
|
|
// left = Math.max(minLeft, Math.min(left, maxLeft));
|
|
|
|
|
|
top = Math.max(minTop, Math.min(top, maxTop)); |
|
|
|
|
|
|
|
|
// 移动当前元素
|
|
|
// 移动当前元素
|
|
|
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; |
|
|
|
|
|
|
|
|
// dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
|
|
|
|
|
|
dragDom.style.transform = `translate(${left + styL}px, ${top + styT}px)`; |
|
|
|
|
|
// 让拖动更平滑
|
|
|
|
|
|
// dragDom.style.cssText += ';top:0px;position:relative;transition: transform 0.2s ease;';
|
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
document.onmouseup = function (e) { |
|
|
document.onmouseup = function (e) { |
|
|
|