如何阻止用户退出屏幕?
问题描述:
我目前使用此代码,奇妙的作品:如何阻止用户退出屏幕?
$(document).ready(function() {
if ($.cookie("cvispos") != undefined) {
var unwrapped = window.JSON.parse($.cookie("cvispos"));
var left = window.JSON.parse($.cookie("cvispos")).left;
var top = window.JSON.parse($.cookie("cvispos")).top;
$("#cguts").css("left", left + "px");
$("#cguts").css("top", top + "px");
}
});
// Buncha cookie stuff and onclick trash...
$("#cguts").draggable({
stop: function (event, ui) {
$.cookie("cvispos", window.JSON.stringify(ui.position));
}
我遇到的问题是,如果你拖动箱子到远向上或向下,你可以完全将其移动到屏幕没有能力将其移回。有没有办法让它远离视点?我尝试使用管理单元,但我无法使其工作。我可以通过在定位上设置最小/最大值来实现它,但找不到任何使我相信这是可能的代码的资源。
答
您可以将可拖动的containment
参数设置为window
,以将其移动限制在可见边界内。
另请注意,您可以通过仅对JSON进行反序列化并在一次调用中设置两个css()
属性来优化代码。试试这个:
$(document).ready(function() {
if ($.cookie("cvispos") != undefined) {
var cookieData = JSON.parse($.cookie("cvispos"));
$("#cguts").css({
left: cookieData.left + "px",
top: cookieData.top + "px"
});
}
});
// Buncha cookie stuff and onclick trash...
$("#cguts").draggable({
containment: 'window',
stop: function (event, ui) {
$.cookie("cvispos", JSON.stringify(ui.position));
}
});
工作奇迹!谢谢(帮助,代码清理,修复我的第一篇文章)!我也学到了一些关于优化的事情,所以奖金。 – user2473138