Skip to content
Snippets Groups Projects
Commit f663b23b authored by Pan's avatar Pan
Browse files

perf[el-dragDialog]: add the verification of moving edges

parent afd255d5
Branches develop
No related tags found
No related merge requests found
...@@ -4,6 +4,7 @@ export default{ ...@@ -4,6 +4,7 @@ export default{
const dragDom = el.querySelector('.el-dialog') const dragDom = el.querySelector('.el-dialog')
dialogHeaderEl.style.cssText += ';cursor:move;' dialogHeaderEl.style.cssText += ';cursor:move;'
dragDom.style.cssText += ';top:0px;' dragDom.style.cssText += ';top:0px;'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
function getStyle(dom, attr) { function getStyle(dom, attr) {
if (dom.currentStyle) { if (dom.currentStyle) {
...@@ -18,6 +19,18 @@ export default{ ...@@ -18,6 +19,18 @@ export default{
const disX = e.clientX - dialogHeaderEl.offsetLeft const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop const disY = e.clientY - dialogHeaderEl.offsetTop
const dragDomWidth = dragDom.offsetWidth
const dragDomheight = dragDom.offsetHeight
const screenWidth = document.body.clientWidth
const screenHeight = document.body.clientHeight
const minDragDomLeft = dragDom.offsetLeft
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
const minDragDomTop = dragDom.offsetTop
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
// 获取到的值带px 正则匹配替换 // 获取到的值带px 正则匹配替换
let styL = getStyle(dragDom, 'left') let styL = getStyle(dragDom, 'left')
let styT = getStyle(dragDom, 'top') let styT = getStyle(dragDom, 'top')
...@@ -32,14 +45,24 @@ export default{ ...@@ -32,14 +45,24 @@ export default{
document.onmousemove = function(e) { document.onmousemove = function(e) {
// 通过事件委托,计算移动的距离 // 通过事件委托,计算移动的距离
const l = e.clientX - disX let left = e.clientX - disX
const t = e.clientY - disY let top = e.clientY - disY
// 移动当前元素 // 边界处理
dragDom.style.cssText += `;left:${l + styL}px;top:${t + styT}px;` if (-(left) > minDragDomLeft) {
left = -minDragDomLeft
} else if (left > maxDragDomLeft) {
left = maxDragDomLeft
}
// 将此时的位置传出去 if (-(top) > minDragDomTop) {
// binding.value({x:e.pageX,y:e.pageY}) top = -minDragDomTop
} else if (top > maxDragDomTop) {
top = maxDragDomTop
}
// 移动当前元素
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
} }
document.onmouseup = function(e) { document.onmouseup = function(e) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment