I'm currently working on a webpage that involves dragging and dropping an image into another element.
Everything works smoothly on Chrome, with the image draggable across the entire screen.
However, on Firefox, there seems to be a problem. While the image's X axis aligns perfectly with the mouse, the Y axis doesn't. It appears to hit an invisible barrier, stopping at a top-style limit of -31. This prevents it from being dropped across the whole screen, restricting it to only the top portion (around ~50px in height).
I am using jQuery methods:
$(".class").draggable({
helper: "clone",
revert: false,
containment: "body",
scroll: false
});
and
$('#element').droppable({
accept: ".class",
});
To track the mouse position, I have implemented the following code:
var offsetTop = $XXXX.offset().top;
var offsetLeft = $XXXX.offset().left;
I also attempted to use .offset().bottom but encountered the same issue. I tried using:
$(window).load(function ($) {
instead of:
$(document).ready(function ($) {
However, this resulted in the draggable element becoming unresponsive on both Chrome and Firefox.
Additionally, using the method: .offsetTop instead of offset().top did not resolve the problem either.