实现与jquery用户界面不工作的拆分器

In this plunk我想用jQuery UI实现拆分器。有三个div在边界移动时应该调整大小。实现与jquery用户界面不工作的拆分器

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

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

来源

2016-07-05 ps0604

你能解释一下你的意思吗？splitter *？ –

可拖动的水平和垂直条，调整div的大小 – ps0604

这里是我的解决方案https://jsfiddle.net/39cwv3y9/19/。涉及数学升技，但基本上它与absolute定位divs。

纵向上，你需要调整顶部和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>

来源

2016-07-05 07:18:23 kasperite

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

实现与jquery用户界面不工作的拆分器

回答

相关问题