可拖动-如何限制可拖动元素越过屏幕底部？

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:

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

Answer 2

You need to set the containment option to something that is the height of the page.

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