[Vuejs]-How to make rearrangeable objects and display them for every user

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.

Leave a comment