问答详情
源自:4-2 [DOM事件] QQ面板拖拽效果(下)

为什么在判断最大宽度的时候可以在offsetwidth-10,而在判断最大高度的时候却不能了呢

第一种可用判断:

// 封装的鼠标移动面板跟着移动的方法
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';
}


提问者:OneMagic 2017-05-06 10:56

个回答

  • 早睡不夜宵晨起吃早
    2017-05-07 10:13:07

    因为X是在框的右上方 右边当然可以让width-10 但是你上方就不能让height-10了 你平行的offsetwidth-10 等于正好把屏幕往左边缩小了10 但是你offsetheight-10是把屏幕从下往上拉了10px 那个X如果在右下方就完全没问题 但是在右上方就出现bug了 不知道解释清楚了没 不懂再问吧