如何阻止用户退出屏幕？

Question

我目前使用此代码，奇妙的作品：

$(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)); 
    } 

我遇到的问题是，如果你拖动箱子到远向上或向下，你可以完全将其移动到屏幕没有能力将其移回。有没有办法让它远离视点？我尝试使用管理单元，但我无法使其工作。我可以通过在定位上设置最小/最大值来实现它，但找不到任何使我相信这是可能的代码的资源。

Answer 1

您可以将可拖动的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)); 
    } 
});