附着在可拖动 div 上的 div 底部

【问题标题】：Bottom of a div sticking to the draggable div附着在可拖动 div 上的 div 底部
【发布时间】：2014-06-24 19:01:06
【问题描述】：

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

<div class="a"></div> <div class="b">drag me</div>

$(function() 
  $('.b').draggable({axis: 'y', containment: [0, 48, 0, 200]});
  $('.b').bind('drag', function (e, ui) {

    var tmp = ui.position.top;  
    $('.a').css('height', tmp); 
    ui.position.top -=  tmp;   

});});

【问题讨论】：

标签： jquery css jquery-ui draggable jquery-ui-draggable

【解决方案1】：

您需要将元素设置为position:absolute;
如果您将.b 元素设置为从顶部20px 开始，请确保在containment: [0, 20, 0, 200], 中使用same value (20)

jsBin demo

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

$(function() {

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

});

解释containment属性

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

【讨论】：