关于层的拖动范围问题

要看具体的拖动方法，才可以，主要是在mousemove方法中写或者在mouseup最后限定

解决方案 »

  1.   

    我的拖动代码如下，请帮我看看如何只在table范围内拖动，谢谢var currentMoveObj = null;        //当前拖动对象
    var relLeft;        //鼠标按下位置相对对象位置
    var relTop;
    var zindex=-1;//控制被拖动对象的z-index值（对象在页面中的位置）

    //鼠标按下
    function OnMouseDown1(obj)
    {
      currentMoveObj = obj;        //当对象被按下时，记录该对象
      relLeft = event.x - currentMoveObj.style.pixelLeft;
      relTop = event.y - currentMoveObj.style.pixelTop;
      zindex=currentMoveObj.style.zIndex;                  //记录原z-index值
      currentMoveObj.style.zIndex=2;
      currentMoveObj.setCapture();                         //事件捕获
    }
    //
    //鼠标移动
    //
    function OnMouseMove1(obj)
    {
      if(currentMoveObj != null)
      {
        currentMoveObj.style.pixelLeft=event.x-relLeft;
        currentMoveObj.style.pixelTop=event.y-relTop;
      }
    }
    //
    //释放鼠标
    //
    function OnMouseUp1()
    {
      currentMoveObj.style.zIndex=zindex;  //恢复zIndex
      zindex=-1;    
      currentMoveObj.releaseCapture();     //当鼠标释放时同时释放事件捕获    
      currentMoveObj = null;               //当鼠标释放时同时释放拖动对象
    }
      

  2.   

    在网上搜索到的，做少量修改应该就可使用：<SCRIPT>
    var dragElement;
    var elY;
    var elX;
    var mouseDownY;
    var mouseDownX;function getPageY (element) {
      var y = 0;
      do
        y += element.offsetTop;
      while ((element = element.offsetParent));
      return y;
    }
    function getPageX (element) {
      var x = 0;
      do
        x += element.offsetLeft;
      while ((element = element.offsetParent));
      return x;
    }
    function startDrag (element, evt) {
      dragElement = element;
      if (document.layers) {
        elY = dragElement.top;
        elX = dragelement.left;
        mouseDownY = evt.pageY;
        mouseDownX = evt.pageX;
        document.captureEvents(Event.MOUSEMOVE);
      }
      else if (document.all || document.getElementById) {
        elY = getPageY (dragElement);
        elX = getPageX (dragElement);
        mouseDownY = evt.clientY;
        mouseDownX = evt.clientX;
      }
      document.onmousemove = drag;
    }
    function drag (evt) {
      if (document.layers)
      {
        /*在这里确定div的位置, 你可以加入限定它不超出table的代码*/
        dragElement.top = elY + evt.pageY - mouseDownY;
        dragElement.left = elX + evt.pageX - mouseDownX;
      }
      else if (document.all)
      {
        /*在这里确定div的位置, 你可以加入限定它不超出table的代码*/
        dragElement.style.pixelTop = elY + event.clientY - mouseDownY;
        dragElement.style.pixelLeft = elX + event.clientX - mouseDownX;
      }
      else if (document.getElementById)
      {
        /*在这里确定div的位置, 你可以加入限定它不超出table的代码*/
        dragElement.style.top = (elY + evt.clientY - mouseDownY) + 'px';
        dragElement.style.left = (elX + evt.clientX - mouseDownX) + 'px';
      }
    }
    function stopDrag () {
      document.onmousemove = null;
      dragElement = null;
      if (document.layers)
        document.releaseEvents(Event.MOUSEMOVE);
    }
    </SCRIPT>
    <div id="infoShow_t" style="z-index:2; border-style:solid;border-width:4pt; border-color:blue; position: absolute; left: 100px; top: 100px;" ONMOUSEDOWN="startDrag(this, event);" ONMOUSEUP="stopDrag();">
    ......
    </div>
      

  3.   

    这是我的拖动代码，包括html和javascript，拖动是根据绝对位置拖动的，如何才能让层在表格范围之内进行拖动呢？请帮看看，谢谢
    <html>
    <style>
    .objDiv {position:absolute; }
    </style>
    </head>
    <body bgcolor="dimgray" scroll = "no"><script type="text/javascript">
    var currentMoveObj = null;        //当前拖动对象
    var relLeft;        //鼠标按下位置相对对象位置
    var relTop;
    var zindex=-1;//控制被拖动对象的z-index值（对象在页面中的位置）

    //鼠标按下
    function OnMouseDown1(obj)
    {
      currentMoveObj = obj;        //当对象被按下时，记录该对象
      relLeft = event.x - currentMoveObj.style.pixelLeft;
      relTop = event.y - currentMoveObj.style.pixelTop;
      zindex=currentMoveObj.style.zIndex;                  //记录原z-index值
      currentMoveObj.style.zIndex=2;
      currentMoveObj.setCapture();                         //事件捕获
    }
    //
    //鼠标移动
    //
    function OnMouseMove1(obj)
    {
      if(currentMoveObj != null)
      {
        currentMoveObj.style.pixelLeft=event.x-relLeft;
        currentMoveObj.style.pixelTop=event.y-relTop;
      }
    }
    //
    //释放鼠标
    //
    function OnMouseUp1()
    {
      currentMoveObj.style.zIndex=zindex;  //恢复zIndex
      zindex=-1;    
      currentMoveObj.releaseCapture();     //当鼠标释放时同时释放事件捕获    
      currentMoveObj = null;               //当鼠标释放时同时释放拖动对象
    }
    </script><div class="objDiv" style="z-index: 2;left: 819px;width:50px;position: absolute; top: 50px; height: 37px" id="divYY" onmousedown="OnMouseDown(this)"onmousemove="OnMouseMove(this)" onmouseup="OnMouseUp(this)">
    <img src="../image/hole.gif" style="width: 56px; height: 55px" />
    </div>
    <table id="tableSmall" style="left: 716px; width: 251px; position: absolute; top: 1px; height: 167px">
      <tr>
        <td colspan="3" style="width: 251px; height: 21px">
        </td>
      </tr>
    </table>
    </body>
    </html>
      

  4.   

    try this:<html>
    <style>
    .objDiv {position:absolute; }
    </style>
    </head>
    <body bgcolor="dimgray" scroll = "no"><script type="text/javascript">
    var currentMoveObj = null;        //当前拖动对象
    var relLeft;        //鼠标按下位置相对对象位置
    var relTop;
    var elX;
    var elY;
    var mouseDownY;
    var mouseDownX;
    var zindex=-1;//控制被拖动对象的z-index值（对象在页面中的位置）function getPageY (element) {
      var y = 0;
      do
        y += element.offsetTop;
      while ((element = element.offsetParent));
      return y;
    }
    function getPageX (element) {
      var x = 0;
      do
        x += element.offsetLeft;
      while ((element = element.offsetParent));
      return x;
    }//鼠标按下
    function OnMouseDown1(obj)
    {
      currentMoveObj = obj;        //当对象被按下时，记录该对象
      relLeft = event.x - currentMoveObj.style.pixelLeft;
      relTop = event.y - currentMoveObj.style.pixelTop;
      zindex=currentMoveObj.style.zIndex;                  //记录原z-index值
      currentMoveObj.style.zIndex=2;
      currentMoveObj.setCapture();                         //事件捕获
      elX = getPageX(currentMoveObj);
      elY = getPageY(currentMoveObj);
        mouseDownY = event.clientY;
        mouseDownX = event.clientX;
    }
    //
    //鼠标移动
    //
    function OnMouseMove1(obj)
    {
      if(currentMoveObj != null)
      {
        if (getPageX(document.getElementById('tableSmall')) >
          elX + event.clientX - mouseDownX)
        {
          currentMoveObj.style.pixelLeft = getPageX(document.getElementById('tableSmall'));
        }
        else
        {
          currentMoveObj.style.pixelLeft = event.x-relLeft;
        }    if (getPageY(document.getElementById('tableSmall')) >
          elY + event.clientY - mouseDownY)
        {
          currentMoveObj.style.pixelTop = getPageY(document.getElementById('tableSmall'));
        }
        else
        {
          currentMoveObj.style.pixelTop = event.y-relTop;
        }
      }
    }
    //
    //释放鼠标
    //
    function OnMouseUp1()
    {
      currentMoveObj.style.zIndex=zindex;  //恢复zIndex
      zindex=-1;
      currentMoveObj.releaseCapture();     //当鼠标释放时同时释放事件捕获
      currentMoveObj = null;               //当鼠标释放时同时释放拖动对象
    }
    </script><div class="objDiv" style="z-index: 2;left: 819px;width:50px;position: absolute; top: 50px; height: 37px" id="divYY" onmousedown="OnMouseDown1(this)"onmousemove="OnMouseMove1(this)" onmouseup="OnMouseUp1(this)">
    <img src="../image/hole.gif" style="width: 56px; height: 55px" />
    </div>
    <table id="tableSmall" style="left: 716px; width: 251px; position: absolute; top: 1px; height: 167px">
      <tr>
        <td colspan="3" style="width: 251px; height: 21px">
        </td>
      </tr>
    </table>
    </body>
    </html>
      

  5.   

    movingboy2(movingboy2) :
    谢谢你的回复，我试过你的方法了，在左边和上面是不会超出table的范围，但是如果向下拖动或者向右拖动是可以超出table的范围的！
      

  6.   

    <html><head>
    <style>
    .objDiv {position:absolute; }
    </style>
    </head>
    <body ><script type="text/javascript">
    var currentMoveObj = null;        //当前拖动对象
    var relLeft;        //鼠标按下位置相对对象位置
    var relTop;
    var elX;
    var elY;
    var mouseDownY;
    var mouseDownX;
    var zindex=-1;//控制被拖动对象的z-index值（对象在页面中的位置）
    //鼠标按下
    function OnMouseDown1(obj)
    {
      currentMoveObj = obj;        //当对象被按下时，记录该对象
      relLeft = currentMoveObj.offsetLeft;
      relTop = currentMoveObj.offsetTop;
      zindex=currentMoveObj.style.zIndex;                  //记录原z-index值
      currentMoveObj.style.zIndex=2;
      currentMoveObj.setCapture();                         //事件捕获
      mouseDownY = event.clientY;
      mouseDownX = event.clientX;
    }
    //
    //鼠标移动
    //
    function OnMouseMove1(obj)
    {
      if(currentMoveObj != null)
      {
        var newLeft=relLeft+event.clientX-mouseDownX ;
        if(newLeft<0) newLeft=0;//防左移出
        if(newLeft>currentMoveObj.offsetParent.offsetWidth-currentMoveObj.offsetWidth) //防右移出
          newLeft=currentMoveObj.offsetParent.offsetWidth-currentMoveObj.offsetWidth
        currentMoveObj.style.left=newLeft;
        
        var newTop=relTop+event.clientY-mouseDownY;
        if(newTop<0) newTop=0;//防上移出
        if(newTop>currentMoveObj.offsetParent.offsetHeight-currentMoveObj.offsetHeight) //防下移出
          newTop=currentMoveObj.offsetParent.offsetHeight-currentMoveObj.offsetHeight
        currentMoveObj.style.top=newTop;
      }
    }
    //
    //释放鼠标
    //
    function OnMouseUp1()
    {
      currentMoveObj.style.zIndex=zindex;  //恢复zIndex
      zindex=-1;
      currentMoveObj.releaseCapture();     //当鼠标释放时同时释放事件捕获
      currentMoveObj = null;               //当鼠标释放时同时释放拖动对象
    }
    </script><div id=containerDiv style="left: 300px; width: 253px; position: absolute; top: 1px; height: 169px" >
      <div class="objDiv" style="z-index: 2;left: 0px;width:50px;position: relative; top: 0px; height: 37px" id="divYY" onmousedown="OnMouseDown1(this)" onmousemove="OnMouseMove1(this)" onmouseup="OnMouseUp1(this)">
        <img src="../image/hole.gif" style="width: 56px; height: 55px" />
      </div>
      <table id="tableSmall" style="left: 0px; width: 251px; position: absolute; top: 0px; height: 167px"  border=1 >
        <tr>
          <td colspan="3" style="width: 251px; height: 21px">fdsafdsa
          </td>
        </tr>
      </table>
    </div>
    </body>
    </html>
      

  7.   

    to satan_dongdong(温柔的狼) :
    向右和向下控制的代码我没有写，写出来也不难。我想你自己尝试写一下印象应该更深刻吧？
    楼上的也给出了比较完整的代码，你可以参考一下，我没有测试了。
      

  8.   

    思路为：
    把要限制范围的table设置为绝对定位
    然后在拖动层的时候计算层的位置和table的参数( left, top, width, height )的差额
    这样就可以控制层的拖动是否超出范围
      

  9.   

    JK_10000(JK) :
    我试了一下你写的，我发现有些问题！！
    当鼠标点下去的时候是正常的，可是当拖动的时候，table发生的位移就不是正常的了，它会移动到浏览器的右下角，请问这是怎么回事呢！？一直弄不明白，请帮忙看看，谢谢！