ドラッグすること<strong>一方向のみ</strong>にドラッグを制限する方法<a href="http://jqueryui.com/draggable/" rel="noreferrer">jQuery Draggable</a><br/></p> <p>を使用して、一方向にのみ

Question

をドラッグを制限しますか？ axis: 'x'

は、これは私が唯一bottomにドラッグするドラッグ可能(with axis set to 'y')をしたい場合は、それはドラッグのことができるようにはならないことを意味し、右
つまりどちらかのみの上部または底部のみaxis: 'y'
と左のみ、またはいずれか一方のみこれは私が試したものですが、動作していない、すなわちドラッグはまだ上方向にドラッグなっているトップ

に向けてドラッグしようとしたとき、それはその場所に残るべき、つまりトップに

$('. 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> 

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