用Jquery UI实现拆分器不工作

在这个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);
        }
  });

这是我的解决方案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;
}

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

相关内容

最新更新

热门标签：