第一种可用判断:
// 封装的鼠标移动面板跟着移动的方法 function fnMove(e, posX, posY) { var oDrag = document.getElementById('loginPanel'), // 光标的X/Y值减去光标距离面板的X/Y值 就是移动后面板所处的位置 l = e.clientX - posX, t = e.clientY - posY, // 可见区域宽度 winW = document.documentElement.clientWidth || document.body.clientWidth, // 可见区域高度 winH = document.documentElement.clientHeight || document.body.clientHeight, // 最大宽度限制 maxW = winW - oDrag.offsetWidth-10, // offsetWidth对象的可见宽度 // 最大高度限制 maxH = winH - oDrag.offsetHeight; // offsetHeight对象的可见高度 // 对left宽度的判断 if (l<0) { l=0; } else if(l>maxW){ l=maxW; } // 对top高度的判断 if(t<0){ t=10; }else if(t>maxH){ t=maxH; } // 改变面板的x和y值 oDrag.style.left = l + 'px'; oDrag.style.top = t + 'px'; }
第二种不可用:
// 封装的鼠标移动面板跟着移动的方法 function fnMove(e, posX, posY) { var oDrag = document.getElementById('loginPanel'), // 光标的X/Y值减去光标距离面板的X/Y值 就是移动后面板所处的位置 l = e.clientX - posX, t = e.clientY - posY, // 可见区域宽度 winW = document.documentElement.clientWidth || document.body.clientWidth, // 可见区域高度 winH = document.documentElement.clientHeight || document.body.clientHeight, // 最大宽度限制 maxW = winW - oDrag.offsetWidth-10, // offsetWidth对象的可见宽度 // 最大高度限制 maxH = winH - oDrag.offsetHeight-10; // offsetHeight对象的可见高度 // 对left宽度的判断 if (l<0) { l=0; } else if(l>maxW){ l=maxW; } // 对top高度的判断 if(t<0){ t=0; }else if(t>maxH){ t=maxH; } // 改变面板的x和y值 oDrag.style.left = l + 'px'; oDrag.style.top = t + 'px'; }
因为X是在框的右上方 右边当然可以让width-10 但是你上方就不能让height-10了 你平行的offsetwidth-10 等于正好把屏幕往左边缩小了10 但是你offsetheight-10是把屏幕从下往上拉了10px 那个X如果在右下方就完全没问题 但是在右上方就出现bug了 不知道解释清楚了没 不懂再问吧