jQuery Draggable 包含可见窗口?

Posted

技术标签:

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

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

我该怎么做?

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

【问题讨论】:

【参考方案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

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

【讨论】:

以上是关于jQuery Draggable 包含可见窗口?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery/jQueryUI Droppable 采用 Draggable 的形式

包含到父级的JQuery Draggable和额外的一个

JQuery Draggable 包含到父级和一些额外的

jQuery UI-Draggable 参数集合

draggable jquery get start parent()元素

缩放容器的jquery可拖动包含数组值