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 的形式