Restrict drag only in one direction

Question

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

Apivorous

Have you figured this out yet? I'm trying to do something similar jsFiddle – Martinsen

You're missing the "I" of India in your profile :) – Guerrero

Answer 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

Apivorous

Just a tiny tip: you could use $(this) instead of repeating $('.draggable'), or store the object in a variable. Thanks Uttara. – Phobe

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

Martinsen

U shudn't be able to even drag. What u have done can be acheived by adding 'revert:true' – Apivorous

@Apivorous I'm still working on it, revert:true wouldn't work in my case, the draggable element was being reverted off the edge of the screen. – Martinsen

@Apivorous adding revert:true conditionally seems to be problematic-jsFiddle – Martinsen

@Apivorous I think I finally have a solid solution, check it out. – Martinsen

Thanx for your effort :). Have already found a solution long back but didn't get time to post it as an answer. – Apivorous