Ограничить сопротивление только в одном направлении

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

Отвечая на мой собственный вопрос (другой альтернативы в дополнение к выше ответа), с тем чтобы помочь другим

Принимая конкретный случай сказать позволяют перетаскивание только вниз, когда ось:» у»

<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 - с Откатить 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'}); 
     } 
    } 
}); 

Метод 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 
     }); 
    } 
});