Is it possible to get the coordinates of each div in the view and store them in local storage in the onunload () javascript function?
I have a view that contains two divs that contain images. I have implemented JQuery drag and drop functionality and both divs are placed inside a container. I would like to store the coordinates of a div in local storage when the user leaves the view and / or refreshes the view. Database storage would not be ideal for my current situation.
$(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
}
Any help achieving this would be awesome !!!
source to share
After taking a break and then revisiting this question, I was able to achieve the desired effect and wanted to share with him in the hope of helping someone else in a future situation.
$(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
}
});
The above code fetches the "top" and "left" offsets of the div and puts them in local storage. When reloading / refreshing the page, the separators are positioned according to the previously saved offsets. This is achieved by making the parent page "relative" and "absolute" divs also write offsets every time the drag event stops.
source to share