Presently, I'm utilizing this script:
let mousePosition;
let offset = [0,0];
let div;
let isDown = false;
div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "237px";
div.style.height = "50px";
div.style.background = "red";
div.style.padding = "15px 0px 0px 0px";
div.style.color = "blue";
div.id = "clock";
document.body.appendChild(div);
div.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
div.offsetLeft - e.clientX,
div.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
div.style.left = (mousePosition.x + offset[0]) + 'px';
div.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
This script enables me to drag a div element using my mouse. As a JavaScript novice, I am still learning.
I am looking for a simple way to save the final position of the Div so that when I reopen the HTML file, the Div will appear in its last saved location.
Thank you.