0👍
Off the top of my head:
Frontend
In Vue, you can implement a reusable component for the tables. These components will have a top
and a left
props which define their absolute position from the container’s top and left (CSS rules). You can easily make them draggable using jQuery by calculating mouse pointer’s position relative to the container’s top-left corner. Pass them as props into top and left for the table components. Store them in an array [{ top: _, left: _ }]
. Append to this array whenever a new table is added.
When save button is clicked send this array to the backend.
Backend
Not sure what exactly is bothering you about this, you can simply store it in a database with top
and left
columns, each row representing one table in your frontend.
Then you can query this database to fetch all rows whenever users visit the page, pass it as an array to the frontend. The frontend will use this array to construct all the tables in the right positions.
- [Vuejs]-How can I debug this dublicate error (Vue.js 2)
- [Vuejs]-Nuxt build can't resolve empty tailwind css variables (ring)