jQuery - Draggable and different screens (fit to screen)

Question

Hi,

I have many draggable div's on my page

$('#bibo').draggable({
    addClasses: false,
    containment: 'window',
    zIndex: '999',
    stack: '.tko.sto'
});

I save the new position on dragstop and put the new top and left values into the SQL.

Ok, everything works great. But when I visit my Page with the Laptop (small screen) some div are out of the screen and a scrollbar is shown.

Is it possible to fix this if the screen is too small?

Thanks in advance!

Answer 1

A simple solution would be to calculate relative sizes and adjust accordingly. For example, instead of saving the direct x,y coordinate, maybe calculate the x,y percentage based on the screen size and save that.

Answer 2

You could check the $(window).width() and do a little math to see if you need to move your div.

var windowWidth = $(window).width();
var left = $("div").position().left;
var width = $("div").width();
if (windowWidth < left + width) {                
    var newLeft = left - ((left + width) - windowWidth);
    $("div").css({ left: newLeft });
}

You may also acheive this with the jqueryui position utility: