求助：层拖动的范围限定

我这里有个限制在img范围内的代码 你拿去把img的宽度和高度用
document.body.clientWidth和document.body.clientWidth替代掉就行了
//限制在目标对象内拖动
//如果超出了边缘将目标对象的最大/最小值赋给截取层
function LimitOnTarget()
{
    var iX = parseInt(oNode.style.left);                        //对象x坐标
    var iY = parseInt(oNode.style.top);                         //对象y坐标
    var iWidth = parseInt(oNode.style.width);                   //对象宽度
    var iHeight = parseInt(oNode.style.height);                 //对象长度
    
    var iTagX = parseInt(oTagNode.style.left);                  //目标对象x坐标
    var iTagY = parseInt(oTagNode.style.top);                   //目标对象y坐标
    
    var iTagWidth = parseInt(oTagNode.offsetWidth);             //目标对象宽度
    var iTagHeight = parseInt(oTagNode.offsetHeight);           //目标对象长度
    
    if(iX<iTagX)
    {
        oNode.style.left = iTagX;
    }
    if(iY<iTagY)
    {
        oNode.style.top = iTagY;
    }
    if(iX+iWidth>iTagX+iTagWidth)
    {
        oNode.style.width = window.parent.frames["EditSet"].document.getElementById("tbxWidth").value;
        oNode.style.height = parseInt(parseInt(oNode.style.width)/dScale);
        oNode.style.left = iTagWidth - parseInt(window.parent.frames["EditSet"].document.getElementById("tbxWidth").value)
    }
    if(iY+iHeight>iTagY+iTagHeight)
    {
        oNode.style.height = window.parent.frames["EditSet"].document.getElementById("tbxLength").value;
        oNode.style.width = parseInt(parseInt(oNode.style.height)*dScale);
        oNode.style.top = iTagHeight - parseInt(window.parent.frames["EditSet"].document.getElementById("tbxLength").value);
    }
}

解决方案 »

  1.   


      var sClientHeight=(document.documentElement.clientHeight||document.body.clientHeight);
      if(parseInt(obj.style.top)>(sClientHeight-obj.clientHeight)) //下边界限制 
        obj.style.top=document.body.clientHeight-obj.clientHeight-10; 
      

  2.   

    支持滚动条  var sClientHeight=(document.documentElement.clientHeight||document.body.clientHeight);
      var sScrollTop=(document.documentElement.scrollTop||document.body.scrollTop);
      if(parseInt(obj.style.top)>(sClientHeight+sScrollTop-obj.clientHeight)) //下边界限制 
        obj.style.top=sClientHeight+sScrollTop-obj.clientHeight-10; 
      

  3.   


    clientHeight 就是透过浏览器看内容的这个区域高度
    所以if(parseInt(obj.style.left)>(document.body.clientWidth-obj.clientWidth)) //右边界限制 <script> 
    var down=false,divleft,divtop; function move(objId,e){ 
      if(e==null) e=window.event;   var obj=document.getElementById(objId); 
      if(down){ 
        obj.style.left=e.clientX-divleft; 
    obj.style.top=e.clientY-divtop 
      }   if(parseInt(obj.style.left) <0) obj.style.left=10; //左边界限制 
      if(parseInt(obj.style.top) <0) obj.style.top=10; //上边界限制   if(parseInt(obj.style.left)>(document.body.clientWidth-obj.clientWidth)) //右边界限制 
      obj.style.left=document.body.clientWidth-obj.clientWidth-10;   //这句有问题 
      if(parseInt(obj.style.top)>(document.body.clientHeight-obj.clientHeight)) //下边界限制 
        obj.style.top=document.body.clientHeight-obj.clientHeight-10; 
    } 
    </script> 
      

  4.   


    //ff
    <html> 
    <head> 
    </head> 
    <body  onmousemove="move('floatDiv',event)"> 
    <script> 
    var down=false,divleft,divtop; function move(objId,e){ 
      if(e==null) e=window.event;   var obj=document.getElementById(objId); 
      if(down){ 
        obj.style.left=e.clientX-divleft; 
    obj.style.top=e.clientY-divtop 
      }   if(parseInt(obj.style.left) <0) obj.style.left=10; //左边界限制 
      if(parseInt(obj.style.top) <0) obj.style.top=10; //上边界限制   if(parseInt(obj.style.left)>(document.body.clientWidth-obj.clientWidth)) //右边界限制 
      obj.style.left=document.body.clientWidth-obj.clientWidth-10;   //这句有问题 
      var h = document.body.clientHeight > document.documentElement.clientHeight ? document.body.clientHeight: document.documentElement.clientHeight;
      if(parseInt(obj.style.top)>(h-obj.clientHeight)) //下边界限制 
        obj.style.top=h-obj.clientHeight-10; } 
    </script> asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf <br>asdfasdfasdf 
    <div style="z-index:888; position:absolute; left:300px; top:100px; width:100px; height:200px; cursor:move; border:1px solid black; background:#EEEEEE;" id="floatDiv" onmousedown="down=true; divleft=event.clientX-parseInt(this.style.left);  divtop=event.clientY-parseInt(this.style.top);"  onmouseup="down=false;"> </div> 
    </body> 
    </html>