如何阻止用戶退出屏幕？

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