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

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

Answer 1

如果您只想保留一個元素 state，“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