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

Question

我有一个包含两个保存图像的 div 的视图。我已经实现了 JQuery 的可拖动功能，并将两个 div 都放在一个容器中。我想在用户离开视图 and/or 刷新视图时将 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 的 'top' 和 'left' 偏移量并将它们放在本地存储中。在 reloading/refreshing 页面上，div 根据先前存储的偏移量进行定位。这是通过使父页面 'relative' 和 div 'absolute' 以及每次可拖动事件停止时记录偏移量来实现的。