Question

我在div上启用了滚动，其上绘制了其他div。我想调整叠加div的大小以标记底层div上的内容。我正在使用jqueryui可调整大小的功能。当底层div处于滚动0,0位置时它工作正常，但是当滚动div然后调整大小时，覆盖div跳转而没有押韵和理由！请帮我解决一下这个。欢迎任何建议。

这是测试条件的代码。抱歉无法为它创造小提琴

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Resizable </TITLE>
  <link rel="stylesheet" type="text/css" href="Styles/jquery.ui.resizable.css" />

  <script type="text/javascript" src="Scripts/jquery-1.5.1.min.js"></script>
  <script type="text/javascript" src="Scripts/jquery.tools.min.js"></script>
  <script type="text/javascript" src="Scripts/jquery-layout.js"></script>
  <script type="text/javascript" src="Scripts/jquery-ui.js"></script>

  <script type="text/javascript" src="Jquery/jquery.ui.core.js"></script>
  <script type="text/javascript" src="Jquery/jquery.ui.widget.js"></script>
  <script type="text/javascript" src="Jquery/jquery.ui.mouse.js"></script>
  <script type="text/javascript" src="Jquery/jquery.ui.resizable.js"></script>


  <style type="text/css">
   #insertfile {
    overflow: auto;
    position: absolute;
    width:200px; height:100px;
    border: 2px solid #000;
}
td { width: 50px; height: 50px; text-align: center; }
  </style>

  <script type="text/javascript">
   $(function() {
    var currentTd = $('td#currentId');
    var scrtop = currentTd.position().top;
    var scrleft = currentTd.position().left;
    $('#insertfile').animate({
        scrollTop: scrtop,
        scrollLeft: scrleft
    }, 400);

    var top = $(currentTd).position().top;
    var left = $(currentTd).position().left;
    var bottom = $(currentTd).position().top + $(currentTd).height() - $(currentTd).position().top;

    var right = $(currentTd).position().left + $(currentTd).width() - $(currentTd).position().left;


    $("<div id='frontLayer' class='front'></div>").insertAfter('.tableData');

//    var frontDiv = document.getElementById('frontLayer');

    $('#frontLayer').css({
        'border': '3px solid #f00',
        'position': 'absolute',
        'z-index': 2,
        'top': top + 'px',
        'left': left + 'px',
        'height': bottom + 'px',
        'width': right + 'px'
    });

    $('#frontLayer').resizable({
        handles: 'n,e,s,w',
    });

});
  </script>
 </HEAD>

 <BODY>
  <div id='insertfile'>
<table border='1px' class='tableData'>
    <tr><td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>

        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td id='currentId'>scroll to me</td>
        <td>12</td>
    </tr>
        <tr><td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr><td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
    </tr>
    </table>
</div>
 </BODY>
</HTML>

请包含提到的脚本并在mozilla上运行它。感谢

Answer 1

找到一种解决方法，但似乎并不优雅。我添加了调整大小处理程序代码以检查所有可能的调整大小，例如如果修改了top，如果只修改了高度，是否修改了left等等。对于条件，我将外部div的scrolltop添加到值。这给了我大部分正确的结果（很少有人必须完成）。但总的来说，这似乎是我编写了太多的代码来使用已经开发的插件。总的来说，我似乎正在自己做所有的大小调整，只有增值才是div的顺畅运动！还发现了在twinhelix上拖动Resize纯javascript代码，它不会受到容器滚动的影响。如果这个解决方案似乎不可避免或不必要，请告诉我！欢迎任何其他解决方案/建议。

通过滚动调整插件大小

1 个答案: