Limitare trascinare in una sola direzione

Question

Utilizzando jQuery Draggable

Come limitare un trascinabile essere trascinati in una sola direzione?
cioè o solo top o solo fondo quando axis: 'y'
e sia solo sinistra o giusto quando axis: 'x'

Questo significa che se voglio un draggable (with axis set to 'y') per essere trascinato solo per bottom, allora non dovrebbe essere in grado di trascinare esso alla parte superiore cioè deve rimanere nel suo posto quando tenta di trascinare verso l'alto

Questo è quello che provato ma non funziona, cioè trascinabile è ancora ottenere trascinato in direzione verso l'alto

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

Rispondendo alla mia domanda (altra alternativa in aggiunta a risposta sopra) in modo da aiutare gli altri

Prendendo un caso specifico dicono permettere il trascinamento solo verso il basso quando l'asse:' 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; 
} 

sceneggiatura

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

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

Metodo 2 - Disable trascinamento senza ripristinare

jsFiddle 2

Fondamentalmente Metodo 2 ju st trattiene l'elemento trascinabile con un contenitore e sposta il contenitore con l'elemento trascinabile. Dai un'occhiata, è sorprendentemente semplice, ma efficace.

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

Metodo 3 Stesso effetto Metodo 2, semplicemente utilizzando la funzione di trascinamento.

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