我试图包含我的可拖动元素,这样它就不能被拖动到可视窗口之外,如果用户位于页面顶部,这很好,但如果向下滚动,它会把所有内容都搞砸。
我该怎么做?
$(".chat-wrapper > li.draggable").draggable({
greedy: true,
handle: '.chat-button',
containment: 'html'
});
只需使用containment: 'window'
和可能的scroll: false
示例:
$('#selector').draggable({
containment: 'window',
scroll: false
});
更多信息:
安全壳,滚动
$(".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 });
尝试删除greedy:true
我试图实现完全相同的事情,并删除它工作