0

所以我有一个容器，里面有三列需要调整大小。容器本身最终也需要调整大小，但现在它可以是静态的，只要里面的列在拖动时可以灵活。

我认为我的想法是正确的，但它并不完全存在。调整大小时，某些部分会正确移动，但其他部分会跳到后面或正确调整部分大小，然后开始向后移动。你可以在这里看到我到目前为止，抓住中间手柄并尝试调整大小：

http://jsbin.com/arulel/1/edit

任何帮助将不胜感激，它只需要在 Firefox 中工作。如果可能的话，最好不要额外的插件。

这里也是代码：

 <div id="container">
    <div id="col1" class="col">
      <p>"Lorem ipsum.."</p>
    </div>
    <div class="resizer first"></div>
    <div id="col2" class="col">
      <p>"Lorem ipsum.."</p>
    </div>
    <div class="resizer second"></div>
    <div id="col3" class="col">
      <p>"Lorem ipsum..."</p>
    </div>
  </div>

CSS：

#container {
  background: none no-repeat 0 0 scroll #aaa;
  height: 600px;
  border-radius: 0 0 6px 6px;
  width: 700px;
  position: relative;
}

.col {
  height: 100%;
  position: absolute;
  z-index: 8000;
  padding: 0 10px;
}

.first {
  width: 4px;
  height: 100%;
  position: absolute;
  left: 33.33%;
  background-color: white;
  z-index: 9000;
}

.second {
  width: 4px;
  height: 100%;
  position: absolute;
  right: 33.33%;
  background-color: white;
  z-index: 9000;
}

.resizer:hover {
  cursor: col-resize;
}

#col1 {
  background: none no-repeat 0 0 scroll #444;
  border-radius: 0 0 0 6px;
  left: 0;
  right: calc(66.66% - 4px);
}
#col2 {
  background: none no-repeat 0 0 scroll #111;
  left: calc(33.33% + 4px);
  right: calc(33.33% - 4px);
  color: white;
}
#col3 {
  background: none no-repeat 0 0 scroll #777;
  border-radius: 0 0 6px 0; 
  left: calc(66.66% - 4px);
  right: 0;
}

Javascript/jQuery：

$(document).ready(function(){

  $(".first").on("mousedown", function(e){
    mousedownFirst = true;
  });
  $(".second").on("mousedown", function(e){
    mousedownSecond = true;
  });
  $("#container").on("mouseup", function(e){
    mousedownFirst = false;
    mousedownSecond = false;
  });
  $("#container").on("mousemove", function(e){

    parentOffset = $(this).offset();

    if(mousedownFirst){
      $(".first").css("left", e.pageX - parentOffset.left);
      $("#col1").css("right", e.pageX - parentOffset.left);
      $("#col2").css("left", e.pageX - parentOffset.left);      
    }
    if(mousedownSecond){
      $(".second").css("left", e.pageX - parentOffset.left);
      $("#col2").css("right", e.pageX - parentOffset.left);
      $("#col3").css("left", e.pageX - parentOffset.left);
    }

  });

});
4

3 回答 3

2

我知道你说过你不想使用插件，但我强烈推荐这个给你。

首先，创建一个简单的表格标记：

<table id='table1' class='resizable'>
<tr>
    <th width='10%' onclick='alert("Bow!!! Do not be afraid!");'>cell 11</th>
    <th width='20%'>cell 12</th>
    <th width='40%'>cell 13</th>
</tr>
<tr>
    <td>cell 21</td>
    <td>cell 22</td>
    <td>cell 23</td>
</tr>
<tr>
    <td>cell 31</td>
    <td>cell 32</td>
    <td>cell 33</td>
</tr>
</table>

<head>然后，只需在标签中包含以下脚本：

http://bz.var.ru/comp/web/resizable-tables.js

实时预览：

单击此处查看上述代码的实时预览

于 2013-04-25T04:25:21.320 回答
1

如果您不想使用插件，则需要仔细查看您的 Javascript。您在同一个元素上左右混合，这似乎不起作用。我不会为你解决整个事情，因为那不是重点，但我可以为你指出正确的方向（反正我没有解决整个事情）。

这是我的编辑：http: //jsbin.com/arulel/15/edit

我所做的只是改变这个：

$("#col1").css("right", e.pageX - parentOffset.left);

对此：

 $("#col1").css("width", e.pageX - parentOffset.left);

结果似乎已经好很多了。这会将第一列的宽度调整为与到第二列开头的距离一样宽。为了让这个想法充分发挥作用，您需要花一些时间来计算宽度和一些数学来计算它。

如果您选择不走这条路，我建议您使用插件。

于 2013-04-26T21:19:31.227 回答
0

您可以使用 jQuery UI resizabble

请参阅此处的堆栈溢出问题以获取更多说明

这里是 jQuery resizable 的示例和它的API 文档

于 2013-04-25T04:27:04.833 回答