问题描述
我有一个问题,目前我正在尝试将图像位置保存在本地存储中,但我不知道该怎么做。我希望它在 localstorage 中,因为一旦您刷新页面,我仍然希望您拖动的图像与您在页面刷新/重新加载之前将图像拖动到的位置相同。该脚本就像一个包含图像项目的清单。
这是代码:
const fill1 = document.querySelector('#item1');
const empties1 = document.querySelectorAll('#block1');
const empties2 = document.querySelectorAll('#block2');
const spot1 = document.getElementById("block1")
const spot2 = document.getElementById("block2")
checkSpot1()
checkSpot2()
localStorage.spot1 = 1
localStorage.spot2 = 0
// Fill listeners
fill1.addEventListener('dragstart',dragStart);
fill1.addEventListener('dragend',dragEnd);
// Loop through empty Boxes and add listeners
for (const empty of empties1) {
empty.addEventListener('dragover',dragOver);
empty.addEventListener('dragenter',dragenter);
empty.addEventListener('dragleave',dragLeave);
empty.addEventListener('drop',dragDrop);
}
for (const empty of empties2) {
empty.addEventListener('dragover',dragOver);
empty.addEventListener('dragenter',dragenter);
empty.addEventListener('dragleave',dragLeave);
empty.addEventListener('drop',dragDrop);
}
// Drag Functions
function dragStart() {
this.idName += ' hold';
setTimeout(() => (this.idName = 'invisible'),0);
}
function dragEnd() {
this.idName = 'fill1';
}
function dragOver(e) {
e.preventDefault();
}
function dragenter(e) {
e.preventDefault();
this.idName += ' hovered';
}
function dragLeave() {
this.idName = 'empties1';
this.idName = 'empties2';
}
function dragDrop() {
this.idName = 'empties1';
this.idName = 'empties2';
this.append(fill1);;
}
function checkSpot1() {
if (localStorage.getItem("spot1") == 1) {
}
}
function checkSpot2() {
if (localStorage.getItem("spot2") == 1) {
}
}
spot1.addEventListener('dragend',setspot1)
spot2.addEventListener('dragend',setspot2)
function setspot1(){
localStorage.spot1 = 1
localStorage.spot2 = 0
}
function setspot2(){
localStorage.spot1 = 0
localStorage.spot2 = 1
}
但是就像我说的那样,我不知道如何将其正确存储在 localstorage 中,并使其显示在页面重新加载之前将图像拖到。
解决方法
如果您想将某些内容保存到 localStorage,请it has to be in string format。
所以,如果你想保存第一个位置,它看起来像:
localStorage.setItem("spot1","0")
其中“spot1”是键,“0”是值。
从 localStorage 中检索:
localStorage.getItem("spot1")
这应该返回“0”
,我会这样实现:(这样你就可以得到被拖动元素的 x 和 y 坐标):
// this is for storing -->
function dragOver(e) {
e.preventDefault();
// Get the x and y coordinates
var x = e.clientX;
var y = e.clientY;
// store the value in localStorage
window.localStorage.setItem('x',x);
window.localStorage.setItem('y',y);
}
// => same as JQuerys document.ready();
document.addEventListener("DOMContentLoaded",function(event) {
// read the data from localstorage
var x = window.localStorage.getItem('x');
var y = window.localStorage.getItem('y');
// Now you have to set the element position to the stored values
// I am assuming you want to set it for block1,and that block1 has absolute
// positioning
// only set the position if there is already a value stored
if( x && y )
{
// I found a pure Javascript solution now
document.getElementById("block1").style.left = x+"px";
document.getElementById("block1").style.top = y+"px";
}
});