jQuery Draggable сдерживание видимое окно?

Question

Я пытаюсь сдержать свой перетаскиваемый элемент, чтобы его нельзя было перетаскивать за пределы видимого окна, что хорошо работает, если пользователь находится вверху страницы, однако, если вы прокрутите страницу вниз вообще, он все испортит.

Как я могу это сделать?

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

Answer 1

Просто используйте containment: 'window' и возможно scroll: false

Пример:

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

Дополнительная информация:

сдерживание , прокручивать

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

Answer 3

попробуйте удалить greedy:true

Я пытался добиться того же самого, и удаление это сработало