如何在react js中拖动并更改元素的位置后保存元素的位置

Question

我使用看板库进行拖放，现在我希望在拖放后保存它们的位置。页面刷新后，它们应处于保存位置

我还没有尝试过cookie。你们有什么建议？感谢的帮助

import ReactDOM from "react-dom";
import Board, { moveCard } from "@lourenci/react-kanban";
import "@lourenci/react-kanban/dist/styles.css";
function ControlledBoard() {
// You need to control the state yourself.
const [controlledBoard, setBoard] = useState(board);
function handleCardMove(_card, source, destination) {
const updatedBoard = moveCard(controlledBoard, source, destination);
setBoard(updatedBoard);
}
return (
<Board onCardDragEnd={handleCardMove} disableColumnDrag>
{controlledBoard}
</Board>
);
}
function UncontrolledBoard() {
return (
<>
<Board
allowRemoveLane
allowRenameColumn
disableColumnDrag
allowRemoveCard
onLaneRemove={console.log}
onCardRemove={console.log}
onLaneRename={console.log}
initialBoard={board}
allowAddCard
onNewCardConfirm={draftCard => ({
id: new Date().getTime(),
...draftCard
})}
onCardNew={console.log}
/>
</>
);
}
function App() {
return (
<>
<h4>Example of an uncontrolled board</h4>
<UncontrolledBoard />
<h4>Example of a controlled board</h4>
<p>Just the card moving is implemented in this demo.</p>
<p>
In this kind of board, you can do whatever you want. We just mirror your
board state.
</p>
<ControlledBoard />
</>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);```

Answer 1

将每个实例的位置作为具有源和目标的对象存储在localStorage中可以解决问题

localStorage.setItem(
`instance`,
JSON.stringify({
board: {
source: value,
destination:value
},
})
);