javascript - 是否可以获取 View 上每个 div 的坐标并将它们保存在 javascript onunload() 函数中的本地存储中？

Question

我有一个包含两个保存图像的 div 的 View 。我已经实现了 JQuery 的可拖动功能，并将两个 div 都放在一个容器中。我想在用户离开 View 和/或刷新 View 时将 div 的坐标保存在本地存储中。存储在数据库中不适合我目前的情况。

 $(document).ready(function () {

    $('#pieChart').draggable
    ({
            containment: $("#myContainer"),
            cursor: "hand",
            opacity: 0.75
    });

    $('#lineChart').draggable
    ({
        containment: $("#myContainer"),
        cursor: "hand", 
        opacity: 0.75
    });
});


window.onunload = function () {

    //get the coordinates of all divs
}

任何帮助实现这一点的人都很棒!!!

Answer 1

休息一下，然后重新审视这个问题，我能够达到预期的效果，并希望分享希望在未来的情况下帮助其他人。

 $(document).ready(function () {

    $("#pieChart").parent().css({ position: "relative" });
    $("#lineChart").parent().css({ position: "relative" });

    $("#pieChart").css({ top: localStorage["pieTop"], left: localStorage["pieLeft"], position:"absolute" });
    $("#lineChart").css({ top: localStorage["lineTop"], left: localStorage["lineLeft"], position:"absolute" });

    $("#pieChart").draggable
    ({
        containment: $("#myContainer"),
        cursor: "hand",
        opacity: 0.75,
    });

    $("#lineChart").draggable
    ({
        containment: $("#myContainer"),
        cursor: "hand", 
        opacity: 0.75
    });
});


$("#pieChart").draggable(
    {
        stop: function (event, ui) {
            console.log(event);

            localStorage["pieTop"] = ($('#pieChart').position().top); //offset top
            localStorage["pieLeft"] = ($('#pieChart').position().left); //offset left
        }
    });

$("#lineChart").draggable(
    {
        stop: function (event, ui) {
            console.log(event);

            localStorage["lineTop"] = ($('#lineChart').position().top); //offset top
            localStorage["lineLeft"] = ($('#lineChart').position().left); //offset left
        }
    });

以上代码检索 div 的“顶部”和“左侧”偏移量并将它们放置在本地存储中。在重新加载/刷新页面时，div 将根据先前存储的偏移量进行定位。这是通过使父页面“相对”和 div“绝对”以及在每次可拖动事件停止时记录偏移量来实现的。