8

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'});
       }
   }
});
Uttara
  • 2,496
  • 3
  • 24
  • 35
  • Have you figured this out yet? I'm trying to do something similar [jsFiddle](http://jsfiddle.net/apaul34208/Rj8dJ/24/) – apaul May 05 '13 at 16:39
  • You're missing the "I" of India in your profile :) – T J Nov 17 '16 at 11:09

2 Answers2

6

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

Uttara
  • 2,496
  • 3
  • 24
  • 35
  • 1
    Just a tiny tip: you could use $(this) instead of repeating $('.draggable'), or store the object in a variable. Thanks Uttara. – Wessam El Mahdy Mar 31 '16 at 06:58
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
        });
    }
});
apaul
  • 16,092
  • 8
  • 47
  • 82
  • U shudn't be able to even drag. What u have done can be acheived by adding 'revert:true' – Uttara May 11 '13 at 07:10
  • @Uttara 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. – apaul May 11 '13 at 12:41
  • @Uttara adding `revert:true` conditionally seems to be problematic-[jsFiddle](http://jsfiddle.net/apaul34208/Pk3xC/1/) – apaul May 11 '13 at 13:07
  • @Uttara I think I finally have a solid solution, check it out. – apaul May 12 '13 at 05:29
  • Thanx for your effort :). Have already found a solution long back but didn't get time to post it as an answer. – Uttara May 14 '13 at 05:56