Mozilla/chrome/JQuery Draggable image not on mouse position

Question

I am busy with a webpage where an image is draggable and droppable in another element.

On chrome, everything works perfect and the image is draggable across the whole screen

On Firefox, the image X axis is perfectly underneath mouse, but the Y axis isnt.
It somehow stops at an "invisible" border. The top-style wont go higher then -31. and thus will not be able to be dropped across the whole screen. Only in the top part of the screen (about ~50px height)

I use the Jquery methods

$(".class").draggable({
    helper: "clone", 
    revert: false,
    containment: "body",
    scroll: false
});

and

    $('#element').droppable({
        accept: ".class",

And to identify the position of the mouse i use this code:

        var offsetTop = $XXXX.offset().top;
        var offsetLeft = $XXXX.offset().left;

I have also tried to use .offset().bottom but this was the exact same result. I have also tried to use

$(window).load(function ($) {

instead of:

$(document).ready(function ($) {

But this made the whole draggable element not draggable anymore. (both on chrome and firefox)

I have also used the method: .offsetTop instead of offset().top but this didnt change anything. Same problem as before.

Answer 1

The solution was: the method draggable had this option: containment: "Body". This was wrong and should've been: false.

So final code:

$(".class").draggable({
    helper: "clone", // use a clone for the visual effect
    revert: false,
    containment: false,
    scroll: false
});