Jquery 一个div的底部粘在可拖动的div上

我试图让一个div的底部粘到垂直拖动div的顶部。第二个div应该调整第一个div的大小。使用当前解决方案，当我第二次开始拖动元素时会出现问题。理想情况下，div应该从当前位置继续，而不是跳到顶部

例如：

拖动我

• 您需要将元素设置为

  位置：绝对

• 如果将

  .b

  元素设置为从顶部

  20px

  开始，请确保在

  容器内使用相同的值：[0,20,0,200]，

.a {
    width: 40px;
    height: 20px;           /* 20px height */
    background-color:blue;
}

.b {
    position:absolute;      /* needed to prevent strange margins on drag */
    top:20px;               /* top at 20px */
    width: 40px;
    height: 40px; 
    background-color: red;
    font-size:12px;
}

解释

包容

属性

containment: [
   // From position coordinates:
   0  , // .left
   20 , // .top
   // To coordinates:
   0  , // .left
   200  // .top
]

$(function() {

    $('.b').draggable({
      axis: 'y',
      containment: [0, 20, 0, 200],
      drag: function( event, ui ) {
        $('.a').height(ui.position.top);
      }
    });

});

containment: [
   // From position coordinates:
   0  , // .left
   20 , // .top
   // To coordinates:
   0  , // .left
   200  // .top
]