Jquery UI可拖动改变其他div的大小

Question

In this plunk我在另外两个div之间有一个div。可以上下拖动中间的div（使用Jquery Draggable）来调整其他两个div的高度。但是有一个奇怪的行为，拖动的div不跟随鼠标，你可以看到两个分隔线。如何解决这个问题？

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