【发布时间】：2012-12-05 07:00:21
【问题描述】：
我正在寻找构建一个基于 Jquery 的仪表板。查看以下示例：
http://jqueryui.com/sortable/#display-grid
和
http://jqueryui.com/sortable/#portlets
我发现如果我们有一个流畅的布局，这个功能很容易实现。然而。我想要一个比上面提到的例子稍微复杂的仪表板。
我要创建的仪表板将具有 一个可以放置物品的网格。这些项目可以放在页面上的任何位置，并且项目之间将允许存在间距。 这些项目可以根据网格调整大小，从而使项目移开。
我确实不想要像谷歌主页仪表板这样的布局，其中磁贴向上移动并且不允许它们在网格中间隔。
例如，我将有一个 10 x 10 的网格（每单位 50 个像素）
一个 tile 可以是 1 x 1 并调整为 1 x 2，然后可以有一个 1 x 1 的垫片，然后是另一个 tile。
我正在寻找一个好的算法来完成这个。我的最终目标是最终得到一个类似于您在 Android 主屏幕上看到的仪表板。
但是，我目前的主要缺点是用于交换和组织网格的智能碰撞检测。
一旦完成，我希望在 github 上分享我的仪表板。谢谢。
【问题讨论】：
-
您是否正在寻找可以用来执行此操作的 jQuery 插件。或者自己从头写一个。 或者让这里的人为你写一个然后发布到 GitHub 上？ :)
-
我正在寻找一个 Jquery 插件，如果可能的话，它可以帮助解决这个问题（如果它符合我的要求）。我可能最终会自己写，但我正在寻找一个好的算法或参考实现来解决这个问题。
-
您提供的两个链接是一个很好的起点，您可以阅读代码理解它，然后根据您的需要进行自定义。
-
听起来有几个 UX 问题需要先回答。如何调整瓷砖的大小？通过拖动边缘？假设在你的 10 x 10 网格上，我有 100 个图块（每个 1x1）。如果我将左上角的图块调整为 2x1 会发生什么？是否应该删除/移除/推动其他人通过它右侧的图块？我会尝试首先考虑每一种 UX 可能性，并确保您所描绘的内容是可用的。抱歉没有回答...从实现的角度来看，您可能正在考虑使用一些自定义逻辑来处理 jQuery UI 的 Sortable 和 Resizable 来处理调整大小的 UX。
-
看起来Droptiles 项目可以为您提供一个不错的起点。这些图块的大小不可调整，但它们可能具有不同的大小。
标签： javascript jquery html drag-and-drop