Question

I have an element which is draggable only by the Y-axis. I want it to be able to go past the top of the screen (which it can), but forbid it from going past the bottom of the screen. I read in a jQuery Draggable API about containment, but found no answer as to the question I’m asking, or at least could not understand how to apply it to my case. Here’s my code so far:

JavaScript:

$(document).ready(function() {
    $("#elem").draggable({
       axis: "y"
    });
});

Answer 1

There must be a better way but;

$(document).ready(function() {
    $("#elem").draggable({
       axis: "y",
       drag: function(event, ui) {
            if($(this).offset().top + $(this).outerHeight() > $(window).height()) {
                $(this).offset({"top": $(window).height() - $(this).outerHeight()});
                event.preventDefault();
            }
       }
    });
});