如何阻止可拖动的 ui 退出屏幕？

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

我遇到的问题是，如果您将框向上或向下拖动，则可以将其完全移出屏幕而无法将其移回。有没有办法防止它移动到视点之外？我尝试使用 snap，但我无法让它工作。我可以通过在定位上设置最小值/最大值来实现它，但找不到任何资源让我相信这段代码是可能的。

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