他のdivのサイズを変更するJquery UIドラッグ可能

Question

In this plunk私は他の2つのdivの間にdivを持っています。中央のdivは、2つの他のdivの高さをリサイズするために上下にドラッグできます（Jquery Draggableを使用）。しかし、奇妙な振る舞いがあります。ドラッグされたdivはマウスの後ろにはないので、2つのディバイダ行を見ることができます。これを修正するには？

HTML

<div id="top1"></div> 
    <div id="div1"></div> 
    <div id="bottom1"></div> 

Javascriptを

 var top1H, bottom1H; 
     $("#div1").draggable({ 
      axis: "y", 
      start: function() { 
       top1H = $("#top1").height(); 
       bottom1H = $("#bottom1").height(); 
      }, 
      drag: function(event,ui) { 
       var shift = ui.position.top; 
       $("#top1").height(top1H + shift); 
       $("#bottom1").height(bottom1H - shift); 
      } 
     }); 

CSS

#div1 { 
    width:180px; 
    height:6px; 
    background-color:#e0e0e0; 
    cursor:ns-resize; 
} 
#top1{ 
    width:180px; 
    height:100px; 
    background-color:orange; 
} 
#bottom1 { 
    width:180px; 
    height:100px; 
    background-color:blue; 
} 

Answer 1

私は高さの計算にはいくつかの小さな変更を加えることによって、必要な効果を得ることができました。

ここでは主な変更点は、高さの計算にした更新Plunker

です：

$("#div1").draggable({ 
    axis: "y", 
    start: function(event, ui) { 
    shiftInitial = ui.position.top; 
    top1H = $("#top1").height(); 
    bottom1H = $("#bottom1").height(); 
    }, 
    drag: function(event,ui) { 
    var shift = ui.position.top; 
    $("#top1").height(top1H + shift - shiftInitial); 
    $("#bottom1").height(bottom1H - shift + shiftInitial); 
    } 
});