So I have set up Jquery draggable so a user can change the positions of divs within a parent div.
When the first drop is performed, all the positions are saved to localstorage. This data is then updated each time a drop is conducted.
When the page is refreshed, the div positions are all displayed correctly based on the saved positions in the localstorage. When I then click a div to begin the drag and drop procedure, the surrounding divs do not move as expected or how they did prior to the page refresh.
HTML
<div id="sortable">
<div id="test0" style="background-color: yellow; border: solid 1px black; height: 50px; width: 100px;">
<div class='ui-state-default'>Test0</div>
</div>
<div id="test1" style="background-color: yellow; border: solid 1px black; height: 50px; width: 100px;">
<div class='ui-state-default'>Test1</div>
</div>
<div id="test2" style="background-color: yellow; border: solid 1px black; height: 50px; width: 100px;">
<div class='ui-state-default'>Test2</div>
</div>
<div id="test3" style="background-color: yellow; border: solid 1px black; height: 50px; width: 100px;">
<div class='ui-state-default'>Test3</div>
</div>
<div id="test4" style="background-color: yellow; border: solid 1px black; height: 50px; width: 100px;">
<div class='ui-state-default'>Test4</div>
</div>
<button onclick="localStorage.clear();">Clear Local Storage</button>
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
});
});