只在一個方向限制拖曳

Question

使用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'}); 
     } 
    } 
}); 

Answer 1

回答我的問題（除了上面的回答其他替代），以幫助他人

舉一個具體的案例說允許拖動只有向下時軸：」 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

Answer 2

方法1 - 與還原哈克

jsFiddle

$('.draggable').draggable({ 
    axis: "y", 
    start: function (event, ui) { 
     start = ui.position.top; 
    }, 
    stop: function (event, ui) { 
     stop = ui.position.top; 

     if (start > stop) { 
      $('.draggable').css({top: ui.originalPosition.top + 'px'}); 
     } 
    } 
}); 

方法2 - 禁用拖動而不還原

jsFiddle 2

基本上方法2菊st限制容器中的可拖動元素，並使用可拖動元素移動容器。看看，它出奇的簡單，但有效。

$('.draggable').draggable({ 
    axis: "y", 
    containment: "#containment-wrapper", 
    scroll: true, 
    scrollSensitivity: 100, 
    scrollSpeed: 25, 
    cursor: '-moz-grabbing' 
}); 
$('.draggable').mousemove(function() { 
    var x = $('.draggable').css('top'); 
    $("#containment-wrapper").css({ 
     top: x 
    }); 
}); 

方法3 作爲方法2，只是使用拖曳功能相同的效果。

jsFiddle 3

$('.draggableDown').draggable({ 
    axis: "y", 
    containment: "#containment-wrapperDown", 
    scroll: true, 
    scrollSensitivity: 100, 
    scrollSpeed: 25, 
    cursor: '-moz-grabbing', 
    drag: function() { 
     var x = $('.draggableDown').position().top; 
     $("#containment-wrapperDown").css({ 
      top: x 
     }); 
    } 
});