jQuery Draggable遏制可见窗口？

Question

我试图包含我的可拖动元素，所以它不能被拖到可视窗口之外，如果用户在页面的顶部，这很有效，但是如果你向下滚动，那么它就会把它全部混淆。

我该怎么做？

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

Answer 1

$(".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 2

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

例子：

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

更多信息：

containment， scroll

Answer 3

我的情况只有一个错误：我有可负担的顶部和左边距的DIV（将放置在中间位置，具有白化位置）。 因此，遏制对X和Y的正值起作用，但是DIV也转到负值坐标，它不应该。有没有解决方法？

Answer 4

尝试删除greedy:true

我试图做到同样的事情，并删除它的工作