实时预览：

Question

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

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

任何帮助都将受到赞赏，它只需要在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);
    }

  });

});

Answer 1

我知道你说更喜欢不使用插件，但我强烈推荐给你。

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

<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

实时预览：

Click here to view a live preview for the above code

Answer 2

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

以下是我的修改：http://jsbin.com/arulel/15/edit

我所做的就是改变这一点：

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

到此：

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

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

如果您选择不沿着这条路走下去，我会推荐一个插件。

Answer 3

您可以使用jQuery UI resizabble

请参阅堆栈溢出问题here以获得更多说明

here jQuery可调整大小的示例并API Documentation为它

容器中的三个可调整大小的列

3 个答案:

实时预览：