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'
 });

score 9 · Answer 1 · answered Jan 06 '16 at 11:04

9

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

Example:

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

More info:

containment, scroll

answered Jan 06 '16 at 11:04

mineroot

1,607
16
23

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]`. – fooquency Dec 29 '18 at 22:49
Thanks! This is what I am looking for. – Takao Baltazar Nov 05 '20 at 09:43

score 2 · Answer 2 · answered Aug 18 '12 at 18:58

$(".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 });

score 0 · Answer 3 · answered Nov 12 '17 at 19:41

0

try removing the greedy:true

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

answered Nov 12 '17 at 19:41

Tsowa Mainasara

93
6

jQuery Draggable containment visible window?

3 Answers3