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

Question

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

我正在计算 div 的初始 width/height 和偏移量 add/subtract。但这不起作用。这段代码有什么问题？

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);
        }
  });

Answer 1

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

垂直方向，需要同时调整top和height属性

横向，你需要调整width和left两个属性。

让我知道它是否符合您的要求。

干杯

Javascripts:

$( 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>

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

Implementing splitter with Jquery UI not working

jquery

jquery-ui

jquery-ui-draggable