如何使拖放功能在页面刷新后停留在放置位置

Question

有人可以帮我一下吗！

我正在做涉及拖放和本地存储的任务。这是我第一次编写涉及本地存储的代码。我正在创建类似看板的东西。

我现在遇到的问题是，我不知道如何使页面刷新后所有卡片都停留在它们被放置的位置。

以下是我尝试过的：

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页面

- anonymousssss

Answer 1

如果只有一个元素需要保留其状态，使用 "left" 和 "top" 就可以了，但是你可以尝试生成一个定义该元素的键。

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

- neiloth

---

谢谢您的回答。如果我想让所有卡片在页面刷新后保留，我可以使用这段代码吗？我的卡片需要在HTML部分具有相同的ID。我是对的吗？ - anonymousssss