jquery - jQueryドラッグ可能なコンテナの可視ウィンドウ?

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