Jquery UI가 작동하지 않는 스플리터 구현

Question

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> 

자바 스크립트

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/입니다. Abit 수학 관련하지만 기본적으로 그것은 absolute divs와 함께 작동합니다. 둘 다 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 :

,791,675,