Restrict drag only in one direction

问题

Using jQuery Draggable

How to restrict a draggable to be dragged only in one direction ?
i.e either only top or only bottom when axis: 'y'
and either only left or only right when axis: 'x'

This means that if I want a draggable (with axis set to 'y') to be dragged only to bottom, then it should not be able to drag it to top i.e it should remain in its place when tried to drag towards top

This is what I have tried but not working, i.e draggable is still getting dragged in upward direction

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

回答1:

Answering my own question (other alternative in addition to above answer) so as to help others

Taking a specific case say allow dragging only downwards when axis:'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;
}

script

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

回答2:

Method 1 - with Revert Hack

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

Method 2 - Disable drag without revert

jsFiddle 2

Basically Method 2 just restrains the draggable element with in a container and moves the container with the draggable element. Have a look, Its surprisingly simple, but effective.

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

Method 3 Same effect as Method 2, just using the drag function.

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

来源：https://stackoverflow.com/questions/15609776/restrict-drag-only-in-one-direction