6

我试图包含我的可拖动元素，因此它不能被拖动到可视窗口之外，如果用户位于页面顶部，这会很好，但是如果你向下滚动，那么它就会搞砸。

我怎样才能做到这一点？

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

3 回答 3

9

只需使用containment: 'window'和可能scroll: false

例子：

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

更多信息：

遏制, 滚动

于 2016-01-06T11:04:49.737 回答
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 });
于 2012-08-18T18:58:04.020 回答
0

尝试删除greedy:true

我试图实现完全相同的事情并删除它有效

于 2017-11-12T19:41:28.120 回答