Question

我遇到了一个奇怪的问题......

我有一个带有大表的父亲相对div。然后我将一个随机数的绝对div附加到这个父级。每个都有不同的宽度，其起始位置基于表中的某个单元格。基本布局如下所示：

<div id="container">
  <table>
    <tr>
      <td id="1"></td>
      <td id="2"></td>
      <td id="3"></td>
      <td id="4"></td>
      <td id="5"></td>
      <td id="6"></td>
    </tr>
    <tr>
      <td id="7"></td>
      <td id="8"></td>
      <td id="9"></td>
      <td id="10"></td>
      <td id="11"></td>
      <td id="12"></td>
    </tr>
  </table>
</div>

然后我使用jQuery将新的div添加到容器中，如下所示：

$("#container").append("<div id='uniqueId' class='someClass'></div>");
$("#uniqueId").css({    
    "left" : $("#cell_3").position().left,
    "top" :  $("#cell_3").position().top
})

新的div有位置：绝对;分配。容器div有一个水平滚动条，当我向右移动滚动条时，绝对div保持在它们的位置并滚动。当我向右移动滚动条时，我希望他们坚持使用他们的起始单元格并向左移动。

临时修复是，我手动为每个人分配了他们的起始位置（单元格ID）并使用了：

$("#container").scroll(function () {
    $("#uniqueId").css({
        "left" : $("#cell_3").position().left
    });
}

但是必须有更好的解决方案来同时将它们全部定位。我也计划让它们可拖动和调整大小;在这种情况下，我的解决方案会变得非常混乱。有什么想法吗？

编辑：对于儿童div在滚动时不会移动＆＃34;问题，我发现在编写原始css时我犯了错字。

#container { position: relative; }

这解决了我的问题（原来我错误地选择了亲戚）。 #container的任何其他职位或根本没有职位声明都会导致附加的绝对<div>保持原位而不是像其他内容一样滚动。

我非常感谢每个人的脑风暴，迫使我再次查看我的代码。

Answer 1

非常有趣的问题，所以我想我会抓住它并且可能会学到一点。

这是FIDDLE，其中包含初步结果。

假设：

表格包含两行，每行6个tds
小盒子随机地与tds相关联，位于td的左上角。

巷道：

创建一个包含表格中每个tds的所有左上角坐标的数组。
为每个tds创建一个随机是/否的数组，以确定是否会在那里放置一个框。
循环遍历每个tds并确定是否应该将该框与该td相关联，然后如果＆＃39;是＆＃39;，请使用该框的相应坐标 - 如果＆＃39; no＆＃39;，什么都不做。

可以通过确定性地或随机地偏移坐标来移动框。

可以随机更改框尺寸和/或背景颜色。

如果这是您正在寻找的内容，那将会很有趣。

JS

var tdarray = [];
$('#container table tr td').each(function(index){
  tdarray[index] = $(this).position().left;
  tdarray[index+12] = $(this).position().top;
                                                 });

var whichboxes = [];
for(r=0; r < 12; r++)
   {
    if( Math.random() >= 0.5 )
      {
       whichboxes[r] = 1;
       }
    else
     {
      whichboxes[r] = 0;
      }
   }
$('.putmehere2').html( "Boxes to place: " + whichboxes );

for(var n = 0; n < 12; n++)
{
  if( whichboxes[n] == 1 )
    {
     var leftcoord = tdarray[n];
     var topcoord  = tdarray[n+12];
     $("#container").append("<div class='randomdiv' id='box" + n + "'></div>");
     $( "#box" + n ).css({    
                         "left" : leftcoord,
                         "top" :  topcoord
                          });
     }
    else
    {
       var donothing = 0;
     }
    }

在水平滚动时移动表中的子div

1 个答案: