¿Puede alguien por favor ayudarme?
Estoy trabajando en una asignación con arrastrar y soltar y almacenamiento local. Esta es la primera vez que escribo un código que involucra almacenamiento local. Estoy creando algo como un tablero kanban.
El problema que tengo en este momento es que no tengo idea de cómo voy a hacer que todas las cartas en el tablero permanezcan donde las dejo caer después de actualizar la página.
Esto es lo que he intentado hasta ahora
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"); }También puedo verificar mi JSFiddle
Si solo hay un elemento que desea mantener su estado, "izquierda" y "arriba" están bien, pero intentaría generar una clave que defina el elemento.
localStorage.setItem("elementAPosition", {left: '10px', top: '5px'})Y cuando sus scripts se ejecutan en primer lugar, puede verificar las posiciones de los elementos y establecer su lugar.
let elementAPos = localStorage.getItem("elementAPosition") //this returns an object with left and top keys. elementA.style.left = elementAPos.left elementA.style.top = elementAPos.top