draggable - 限制只向一个方向拖动

使用jQuery Draggable

如何限制可拖动对象只能在一个方向上拖动？
即axis: 'y'时仅顶部或底部
并且axis: 'x'时只能向左或仅向右

这意味着如果我只希望将可拖动的(with axis set to 'y')仅拖动到bottom，则它不应将其拖动到顶部，即当尝试将其拖动到顶部时应将其保留在原处

这是我尝试过但无法正常工作的内容，即可拖动对象仍在向上拖动

$('. draggable').draggable({
    axis: 'y',
    handle: '.top'
    drag: function( event, ui ) {
       var distance = ui.originalPosition.top - ui.position.top;

       // if dragged towards top
       if (distance > 0) {
           //then set it to its initial state
           $('.draggable').css({top: ui.originalPosition.top + 'px'});
       }
   }
});

最佳答案

回答我自己的问题（除了上述答案以外的其他替代方法），以帮助他人

以特定情况为例，当轴为“ y”时，仅允许向下拖动

<div class="draggable">draggable only downwards</div>

的CSS

.draggable {
    position:absolute;
    top:0px;
    background:pink;
    height:100px;
    width:100%;
    left: 0px;
    text-align:center;
}

脚本

$('.draggable').draggable({
    axis: "y"
});

$('.draggable').on('mousedown', function() {
    var x1 = x2 = $(".draggable").position().left;
    var y1 = $(".draggable").position().top;
    var y2 = ($(window).height() + $(".draggable").position().top);
    $(".draggable").draggable('option', 'containment', [x1, y1, x2, y2]);
});

Demo Link

关于draggable - 限制只向一个方向拖动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15609776/