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

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

HTML

CSS

---

通过对高度计算进行一些小的更改，我能够获得您想要的效果

这里有一个更新的

主要变化是高度计算：

$( "#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);
  }
});

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

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

$( "#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);
  }
});