jquery draggable bug when scrolling horizontally

Question

thing is that i got this helped from someone here to drag a div but if you wanted to scroll down/up it wouldn't be possible, with this code, that won't happen:

$(function() {
    $("#divname").draggable({
        start: function(event) {
            var content = $("#panel_content");

            // if we're scrolling, don't start and cancel drag
            if (event.originalEvent.pageX-content.offset().left > content.innerWidth())
            {
                $(this).trigger("mouseup");
                return false;
            }
        }
    });
});

Now, i could try to understand how this work, seems pretty logic, well thought. I should now try to get the offset.top and validate it against the content.innerHeight(), right? like this:

event.originalEvent.pageY-content.offset().top > content.innerHeight()

Thing is, i've done a console.log to see these values constantly, and the innerHeight() is always the same (1242) doesn't matter how much i resize it. Why is this happening? Should i be using another function to get the current Height of the div container?

Thanks.

Answer 1

Okey solved this by using:

event.originalEvent.pageY-content.offset().top > parent_content.innerHeight()

So the entire if-block according to my needs is:

$(function() {
    $("#sendmessage-panel-overlay").draggable({
        start: function(event) {
            var content = $("#panel_content");
            var parent_container = $("#sendmessage-panel-overlay");

            // if we're scrolling, don't start and cancel drag
            if (event.originalEvent.pageX-content.offset().left > content.innerWidth() ||
                    event.originalEvent.pageY-content.offset().top > (parent_container.innerHeight() - 34))
            {                   
                $(this).trigger("mouseup");
                return false;
            }
        }
    }).resizable();
});