jQuery Draggable 包含可见窗口？答案

【问题标题】：jQuery Draggable containment visible window?jQuery Draggable 包含可见窗口？
【发布时间】：2012-03-10 05:24:54
【问题描述】：

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

我该怎么做？

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

【问题讨论】：

标签： jquery draggable containment

【解决方案1】：

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

例子：

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

更多信息：

containment, scroll

【讨论】：

请注意，您也可以使用边界框，因此如果您想限制说顶部为 50，底部为 35，则可以使用：containment: [0, 50, 0, $(window).height() - 35]。
谢谢！这就是我要找的。span>

【解决方案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 });

【讨论】：

【解决方案3】：

尝试删除greedy:true

我试图实现完全相同的东西并且将其删除

【讨论】：