如何阻止 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，但我无法让它工作。我可以通过在定位上设置 min/max 来实现它，但是找不到任何资源让我相信这段代码是可能的。

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 可拖动对象退出屏幕？

How can I stop a ui draggable from exiting the screen?

jquery

jquery-ui

draggable