使用本地存储的Jquery Dragable在页面刷新后不工作

因此，我设置了jquerydraggable，以便用户可以更改父div中div的位置

执行第一次拖放时，所有位置都保存到localstorage。然后，每次执行drop时都会更新此数据

刷新页面时，将根据本地存储中保存的位置正确显示所有div位置。然后，当我单击一个div开始拖放过程时，周围的div不会按预期移动，也不会按页面刷新之前的方式移动

HTML

测试0
测试1
测试2
测试3
测试4
清除本地存储

Javascript

    $( function() {

    newPosVal = [];

    if (localStorage.getItem("newData") != null){

        var storedData = JSON.parse(localStorage.getItem("newData"));

        console.log("New position Local Storage data being used:");
        console.log(storedData);

                    for (var i = 0; i < storedData.length; i++) {
                        console.log("stored: #test" + storedData[i]['div_id'] + " " + storedData[i]['offset_top_position']);
                        var id = storedData[i]['div_id'];
                        var position = storedData[i]['offset_top_position'];
                        $('#test' + id).offset({top:position});

                        console.log("Pos Check: #test" + id, $("#test" + id).offset().top);
                    }

    }

    $( '#sortable' ).sortable({
        revert: false,
        stop: function() {

            if (localStorage.getItem("newData") != null){

                var dataNew = jQuery.parseJSON(localStorage.getItem("newData"));

                console.log("New position Local Storage data being used:");
                console.log(dataNew);

                    for (var i = 0; i < dataNew.length; i++) {
                        console.log("previous: #test" + dataNew[i]['div_id'] + " " + dataNew[i]['offset_top_position']);
                        id = dataNew[i]['div_id'];
                        position = dataNew[i]['offset_top_position'];
                        offset = $('#test' + id).offset();
                        newPosVal[i] = {"div_id":id, "offset_top_position":offset.top};
                        console.log("Newly stored: #test" + id, $("#test" + id).offset().top);
                    }

                console.log("New Position Using Local Storage data: " + JSON.stringify(newPosVal));
                localStorage.setItem("newData", JSON.stringify(newPosVal));

            } else {

                console.log("No div position data is being used");

                    for(var i=0; i < 5; i++) {
                        var id = i;
                        var offset = $('#test' + id).offset();
                        newPosVal[i] = {"div_id":id, "offset_top_position":offset.top};
                    }

                console.log("First Position Data: " + JSON.stringify(newPosVal));
                localStorage.setItem("newData", JSON.stringify(newPosVal));

            }

        }
    });

    $( '#draggable' ).draggable({
        connectToSortable: '#sortable',
        //helper: 'clone',
        revert: false
    });

});

$（函数（）{
newPosVal=[]；
if（localStorage.getItem（“newData”）！=null）{
var storedData=JSON.parse（localStorage.getItem（“newData”）；
log（“正在使用的新位置本地存储数据：”）；
console.log（storedData）；
对于（变量i=0；i

    $( function() {

    newPosVal = [];

    if (localStorage.getItem("newData") != null){

        var storedData = JSON.parse(localStorage.getItem("newData"));

        console.log("New position Local Storage data being used:");
        console.log(storedData);

                    for (var i = 0; i < storedData.length; i++) {
                        console.log("stored: #test" + storedData[i]['div_id'] + " " + storedData[i]['offset_top_position']);
                        var id = storedData[i]['div_id'];
                        var position = storedData[i]['offset_top_position'];
                        $('#test' + id).offset({top:position});

                        console.log("Pos Check: #test" + id, $("#test" + id).offset().top);
                    }

    }

    $( '#sortable' ).sortable({
        revert: false,
        stop: function() {

            if (localStorage.getItem("newData") != null){

                var dataNew = jQuery.parseJSON(localStorage.getItem("newData"));

                console.log("New position Local Storage data being used:");
                console.log(dataNew);

                    for (var i = 0; i < dataNew.length; i++) {
                        console.log("previous: #test" + dataNew[i]['div_id'] + " " + dataNew[i]['offset_top_position']);
                        id = dataNew[i]['div_id'];
                        position = dataNew[i]['offset_top_position'];
                        offset = $('#test' + id).offset();
                        newPosVal[i] = {"div_id":id, "offset_top_position":offset.top};
                        console.log("Newly stored: #test" + id, $("#test" + id).offset().top);
                    }

                console.log("New Position Using Local Storage data: " + JSON.stringify(newPosVal));
                localStorage.setItem("newData", JSON.stringify(newPosVal));

            } else {

                console.log("No div position data is being used");

                    for(var i=0; i < 5; i++) {
                        var id = i;
                        var offset = $('#test' + id).offset();
                        newPosVal[i] = {"div_id":id, "offset_top_position":offset.top};
                    }

                console.log("First Position Data: " + JSON.stringify(newPosVal));
                localStorage.setItem("newData", JSON.stringify(newPosVal));

            }

        }
    });

    $( '#draggable' ).draggable({
        connectToSortable: '#sortable',
        //helper: 'clone',
        revert: false
    });

});