jQuery Draggable containment visible window?

Question

I'm trying to contain my draggable element so it cannot be dragged outside of the viewable window, which works well if the user is at the top of the page, however if you scroll down at all then it messes it all up.

How can I do this?

$(".chat-wrapper > li.draggable").draggable({ 
 greedy: true, 
 handle: '.chat-button', 
 containment: 'html'
 });

Airman

Answer 1

Just use containment: 'window' and possible scroll: false

Example:

$('#selector').draggable({
    containment: 'window',
    scroll: false
});

More info:

containment, scroll

Listen

Note that you can also use a bounding box, so if you want to constrain say to 50 at the top but 35 at the bottom, then one can use: containment: [0, 50, 0, $(window).height() - 35]. – Pyrometallurgy

Thanks! This is what I am looking for. – Khalil

Answer 2

$(".chat-wrapper > li.draggable")
.on('mousemove',function(){ // Update containment each time it's dragged
    $(this).draggable({
        greedy: true, 
        handle: '.chat-button',

        containment: // Set containment to current viewport
        [$(document).scrollLeft(),
        $(document).scrollTop(),
        $(document).scrollLeft()+$(window).width()-$(this).outerWidth(),
        $(document).scrollTop()+$(window).height()-$(this).outerHeight()]
    });
})
.draggable({ scroll: false });

Wheelchair

Answer 3

try removing the greedy:true

I tried to achieve the exact same thing and removing it worked

Nita