使用网格布局的JQuery仪表盘

Question

我希望构建一个基于Jquery的仪表盘。查看以下示例：

http://jqueryui.com/sortable/#display-grid

并且

http://jqueryui.com/sortable/#portlets

我发现如果我们有一个流式布局，这个功能很容易实现。但是，我想要创建一个略微比上面提到的示例复杂的仪表板。

我要创建的仪表板将有一个网格，可以在其中放置项目。项目可以放置在页面上的任何位置，并允许项目之间存在间隔。项目可以根据网格大小进行调整大小，导致项目躲避开来。

我不想要像谷歌主页仪表板那样的布局，其中瓷砖向上移动并且不允许在网格中它们之间存在间隔。

例如，我将有一个10 x 10的网格（每个单位50像素）

瓷砖可以是1 x 1的，然后调整为1 x 2，然后可以有一个1 x 1的间隔，然后是另一个瓷砖。

我正在寻找一个好的算法来完成这项任务。我的最终目标是拥有类似于Android主屏幕上看到的仪表板。

然而，我目前的主要障碍是智能碰撞检测，以交换和组织网格。

一旦完成，我希望在github上分享我的仪表板。谢谢。

- Elixir

---

你是否正在寻找一个可以用来完成这个任务的jQuery插件？或者你可以从头开始自己编写一个。或者让这里的某个人为你编写一个，然后你将其发布在GitHub上？ :) - El Ronnoco

你提供的这两个链接是一个非常好的起点，你可以阅读代码并理解它，然后根据你的需求进行自定义。 - Mehdi Karamosly

看起来有几个 UX 问题需要先回答。瓷砖如何调整大小？通过拖动边缘吗？在您的 10 x 10 网格上，我有 100 个瓷砖 (每个瓷砖为1x1)。如果我将左上角的瓷砖调整为2x1，那么右侧的瓷砖会被删除/移除/推动其他瓷砖吗？我会尝试先考虑所有可能的 UX 情况，并确保您所想象的内容可以使用。抱歉没有给出具体答案...从实现的角度来看，您可能需要将 jQuery UI 的 Sortable 和 Resizable 与一些自定义逻辑相结合，以处理调整大小的 UX。 - Stu Cox

看起来Droptiles项目可以为您提供一个不错的起点。这些瓷砖不能调整大小，但它们可能具有不同的尺寸。 - izilotti

@stuCox同意。整个ul布局的问题变得很棘手。我本来想把东西拖到最近的空白处，先向左，然后向上，再横向移动，最后根据可用空间向下。主要问题就是要摆脱静态网格结构——不像砌体或同位素那样将所有内容推入流体布局中。整个可排序的小部件方法也存在问题，因为ul的处理方式不同。所以我认为这是我最关心的问题。所以回答你的问题，我会采取推进的方法，将其推入网格内。如果无法处理推进，则失败。 - Elixir

Answer 1

它不是一个jQuery插件，但是Gridster可以做到你提到的所有事情，除了调整大小。

如果您找到更完整的东西，请告诉我们。

- rowanu

---

Gridster是一个很好的起点。但实际上它并没有以我期望的方式实现。一定要点赞。网格布局不允许在两个小部件之间垂直空列行，也不允许调整大小。 - Elixir

小更新：Gridster是一个带有瓷砖调整支持等功能的jQuery插件（至少在我尝试过的演示中是这样）。即使信息有点过时，它也帮助我找到了这个不错的小插件。感谢@rowanu ;) - Felix Bayer