javascript - 如何存储/检索元素被移动的最后位置?
问题描述
目前我正在使用这段代码:
var mousePosition;
var offset = [0,0];
var div;
var 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);
该代码允许我使用鼠标移动 div。我对 JavaScript 不是很有经验。
但我希望有一种简单的方法来缓存 Div 的结束位置。这样当我关闭并打开 HTML 文件时,Div 将在其最后缓存的位置开始。
谢谢。
解决方案
您可以使用localStorage将位置信息缓存到浏览器中。
window.localStorage.setItem('divPosition', JSON.stringify({
left: div.style.left,
top: div.style.top
}));
console.log(JSON.parse(window.localStorage.getItem('divPosition')));
一个警告是 localStorage 不可靠地接受除字符串值之外的任何内容,因此添加更可靠的信息需要对数据进行字符串化和解析。
推荐阅读
- c# - 为什么我要声明一个私有变量然后实例化?
- compression - 磁盘洗牌上的 Dask 压缩
- c - 具有文件范围的 C 结构
- python - 散景库 (Python) 问题:“无法将 {curr_type} 自动转换为 ColumnDataSource。”
- javascript - 多次将对象添加到数组
- excel - 我可以在excel中用另一个替代公式添加替代公式吗?
- scala - 如何用派生对象替换树状Scala案例类实例中的对象?
- go - golang 调度程序如何以及为什么在 runtime/proc.go:execute 中递归运行 goroutine?
- php - PHP:放入数据库后转换的文本
- velo - 如何在 Wix 数据库中提交表单期间获取动态页面的标题