使用 Jquery UI 实现拆分器不起作用答案

【问题标题】：Implementing splitter with Jquery UI not working使用 Jquery UI 实现拆分器不起作用
【发布时间】：2016-07-05 00:24:26
【问题描述】：

In this plunk 我正在尝试使用 Jquery UI 实现拆分器。移动边框时应该调整三个 div 的大小。

我正在计算 div 的初始宽度/高度并添加/减去偏移量。但这不起作用。这段代码有什么问题？

HTML

  <div style="width:180px;height:200px;float:left;background-color:orange">
      <div id="cols" style="width:180px;height:200px"></div>
      <div id="div1"></div>
      <div id="tabs" style="width:180px;height:200px;background-color:blue;float:left"></div>
  </div>
  <div id="div2"></div>
  <div id="canvas" style="width:200px;height:406px;background-color:red;float:left"></div>

Javascript

  var colsH, tabsH, colsW, canvasW;
  $( "#div1" ).draggable({
      axis: "y",
      start: function() {
          colsH = $("#cols").height();
          tabsH = $("#tabs").height();
        },
      drag: function(event,ui) {
          var shift = ui.offset.top;
          $("#cols").height(colsH + shift);
          $("#tabs").height(tabsH - shift);
        }
    });

  $( "#div2" ).draggable({
     axis: "x",
     start: function() {
          colsW = $("#cols").width();
          canvasW = $("#canvas").width();
        },
      drag: function(event,ui) {
          var shift = ui.offset.left;
          $("#cols").width(colsW - shift);
          $("#tabs").width(colsW - shift);
           $("#canvas").width(colsW + shift);
        }
  });

【问题讨论】：

你能解释一下你所说的 splitter 是什么意思吗？
调整 div 大小的可拖动水平和垂直条

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

这是我的解决方案https://jsfiddle.net/39cwv3y9/19/。涉及到数学，但基本上它适用于absolute定位的div。

纵向，需要同时调整top和height属性

水平方向，需要同时调整width和left属性。

如果它符合你的要求，请告诉我。

干杯

Javascript：

$( document ).ready(function() {

  var colsH, tabsH, colsW, canvasW, div1W, tabsW;
  var current_div1_top = $( "#div1" ).offset().top;
  var current_div2_left = $( "#div2" ).offset().left;
  $( "#div1" ).draggable({
      axis: "y",
      start: function(event, ui) {
          current_div1_top = ui.offset.top;
          colsH = $("#cols").height();
          tabsH = $("#tabs").height();
      },
      drag: function(event,ui) {
          var shift = ui.offset.top - current_div1_top;
          $("#cols").height(colsH + shift);
          $("#tabs").height(tabsH - shift);
       }
    });

  $( "#div2" ).draggable({
     axis: "x",
     start: function(event, ui) {       
          current_div2_left = ui.offset.left;
          colsW = $("#cols").width();
          canvasW = $("#canvas").width();
          tabsW = $("#tabs").width();
          div1W = $("#div1").width();
      },
      drag: function(event,ui) {
          var shift = ui.offset.left - current_div2_left;
          $("#cols").width(colsW + shift);
          $("#tabs").width(tabsW + shift);
          $("#div1").width(div1W + shift);
          $("#canvas").width(canvasW + (0 - shift));
          // width of vertical bar is 6
          $("#canvas").css('left', ui.offset.left + 6);
      }
  });

});

CSS

/* Styles go here */
#div1 {
  position:absolute;
  width:180px;
  height:6px;
  top: 200px;
  background-color:#e0e0e0;
  cursor:ns-resize;
}
#div2{
  position:absolute;
  left:185px;
  top:10px;
  width:6px;
  height:406px;
  background-color:#e0e0e0;
  cursor:ew-resize;
}
#tabs{
  position:absolute;
  width:180px;
  height:205px;
  background-color:blue;
}
#cols {
  width: 180px;
  height: 200px;
  background-color: orange;
}
#canvas {
  position: absolute;
  width: 200px;
  height: 406px;
  left: 190px;
  top: 8px;
  background-color: red;
}

HTML：

<body>
    <div>
       <div id="cols"></div>
       <div id="div1"></div>
       <div id="tabs"></div>
       <div id="div2"></div>
       <div id="canvas"></div>
    </div>
</body>

【讨论】：

感谢您的努力，但我不喜欢使用绝对定位，因为屏幕可能有不同的尺寸，这就是为什么在某些情况下您需要将高度或宽度定义为 100%。