Question

我试图让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;   

});});

Answer 1

您需要将元素设置为position:absolute;
如果您将.b元素设置为从顶部20px开始，请确保在containment: [0, 20, 0, 200], 相同值（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
]

一个div的底部坚持可拖动的div

1 个答案: