如何在页面刷新后使拖放保持在拖放位置

Question

有人能帮帮我吗！

我正在用drag&丢弃和本地存储。这是我第一次编写涉及本地存储的代码。我正在创建有点像看板。

我现在的问题是，我不知道该怎么办以使板中的所有卡在页面刷新后保持在我放置的位置。

以下是我迄今为止尝试过的

const todos = document.querySelectorAll(".todo");
const all_status = document.querySelectorAll(".box")

todos.forEach((todo) => {
todo.addEventListener("dragstart", dragStart);
todo.addEventListener("dragend", dragEnd);
});
function dragStart() {
draggableTodo = this;
setTimeout(() => {
this.style.display = "none";
}, 0);
console.log("dragStart");
}
function dragEnd() {
draggableTodo = null;
setTimeout(() => {
this.style.display = "block";
}, 0);
console.log("dragEnd");
}
all_status.forEach((box) => {
box.addEventListener("dragover", dragOver);
box.addEventListener("dragenter", dragEnter);
box.addEventListener("draleave", dragLeave);
box.addEventListener("drop", dragDrop);
});
function dragOver(e) {
e.preventDefault();
//console.log("dragOver");
}
function dragEnter() {
console.log("dragEnter");
}
function dragLeave() {
console.log("dragLeave");
}
function dragDrop() {
this.appendChild(draggableTodo);
var left = this.offsetLeft;
var top = this.offsetTop;
localStorage.setItem("left", left);
localStorage.setItem("top", top);
console.log("dropped");
}

可以检查我的JSFiddle太

JSFiddle

Answer 1

如果只有一个元素需要保持其状态，"左"；以及"；顶部"；是可以的，但是您可以尝试生成一个定义元素的键。

localStorage.setItem("elementAPosition", {left: '10px', top: '5px'})

当脚本在第一个位置运行时，可以检查元素位置并设置它们的位置。

let elementAPos = localStorage.getItem("elementAPosition") //this returns an object with left and top keys.
elementA.style.left = elementAPos.left
elementA.style.top = elementAPos.top