Question

how can you prevent the user to drag the element outside the window?

elm.css({
        top : $(window).scrollTop() + ($(window).height() - elm.height()) / 2+'px',
        left : ($(window).width() - elm.width()) / 2+'px'
    })
    .draggable({
        handle : tr_top
    });

Answer 1

You can use the containment option:

elm.draggable({
    handle: tr_top,
    containment: "window"
});