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

如何阻止ui draggable退出屏幕？

1 个答案: