如何制作可重新排列的对象并为每个用户显示它们

Question

标题可能令人困惑，但我会尝试解释我需要什么。

我有显示某个地方（例如餐厅）的桌子的应用程序。此表显示给最终用户。 但我希望所有者能够从管理面板重新排列这些表格的位置。他将被呈现容器（只是一个矩形以保持简单），我希望他们能够拿桌子（它可以是图标或其他任何东西）并将其放置在他们想要的任何地方（字面上在这个容器中的任何方向或位置）。他们可以根据需要添加任意数量的表格并将它们放置在他们想要的位置。这部分是针对前端的，我对此并不太害怕。但对我来说问题是如何使用 Laravel 保存这些信息？因为我希望所有者保存表格的这个位置，然后当最终用户访问该位置的页面时，我希望他们看到所有者提供的这些表格的位置。

我怎样才能做到这一点？有可能吗？

我不需要 Laravel 特定的答案，只是为了给我指明正确的方向，以便我了解如何将其保存在后端的逻辑。

我在前端使用 Vue.js，在后端使用 Laravel。

我做了这个草图，所以你可以明白我的意思：https://prnt.sc/1tcv3lf

Answer 1

在我的头顶：

前端

在 Vue 中，您可以为表格实现可重用的组件。这些组件将有一个 top 和一个 left 属性，它们定义了它们从容器顶部和左侧的绝对位置（CSS 规则）。通过计算鼠标指针相对于容器左上角的位置，您可以使用 jQuery 轻松地使它们可拖动。将它们作为道具传递到表格组件的顶部和左侧。将它们存储在数组[{ top: _, left: _ }] 中。每当添加新表时追加到此数组。
单击保存按钮时，将此数组发送到后端。

后端

不确定究竟是什么困扰您，您可以简单地将其存储在具有top 和left 列的数据库中，每一行代表前端中的一个表。

然后，您可以在用户访问页面时查询此数据库以获取所有行，并将其作为数组传递给前端。前端将使用这个数组在正确的位置构造所有的表。