實現與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用戶界面不工作的拆分器

回答

相關問題