javascript 带有网格布局的 Jquery 仪表板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13717911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Dashboard with Grid Layout
提问by Elixir
I'm looking to build a Jquery based dashboard. Looking at the following examples:
我正在寻找构建一个基于 Jquery 的仪表板。查看以下示例：
http://jqueryui.com/sortable/#display-grid
http://jqueryui.com/sortable/#display-grid
and
和
http://jqueryui.com/sortable/#portlets
http://jqueryui.com/sortable/#portlets
I see that this functionality is easily accomplished if we have a fluid layout. However. I want a dashboard which is slightly more complex than the examples mentioned above.
我看到如果我们有一个流畅的布局，这个功能很容易实现。然而。我想要一个比上面提到的例子稍微复杂的仪表板。
The dashboard I'm looking to create will have a grid where items can be dropped onto. The items can be dropped anywhere on the page, and spacing will be allowed to exist between items. The items can be resizable against the grid causing items to move out of the way.
我要创建的仪表板将有一个网格，可以在其中放置项目。项目可以放置在页面上的任何位置，项目之间将允许存在间距。这些项目可以根据网格调整大小，从而使项目移开。
I do notwant a layout like the google homepage dashboard where tiles shift up and do not allow spacing between them in the grid.
我不想要像谷歌主页仪表板这样的布局，其中瓷砖向上移动并且不允许它们在网格中间隔。
So for example I would have a 10 x 10 grid (50 pixels per unit)
例如，我将有一个 10 x 10 的网格（每单位 50 像素）
A tile can be 1 x 1 and resized to 1 x 2 and then there can be a 1 x 1 spacer and then another tile.
一个磁贴可以是 1 x 1 并调整为 1 x 2，然后可以有一个 1 x 1 间隔器，然后是另一个磁贴。
I'm looking for a good algorithm to accomplish this. My ultimate goal is to end up with a dashboard similar to the ones you would see on your android home screens.
我正在寻找一个好的算法来实现这一点。我的最终目标是最终得到一个类似于您在 Android 主屏幕上看到的仪表板。
However, my major drawback is currently smart collision detection for swapping and organising the grid.
然而，我的主要缺点是目前用于交换和组织网格的智能碰撞检测。
Once accomplished I hope to share my dashboard on github. Thank you.
完成后，我希望在 github 上分享我的仪表板。谢谢你。
回答by rowanu
It's not a jQuery plugin, but Gridsterdoes everything you mentioned EXCEPT for the resizing.
它不是一个 jQuery 插件，但Gridster 会做你提到的所有事情，除了调整大小。
Please let us know if you find something more complete.
如果您发现更完整的内容，请告诉我们。
