jQuery ui Sortable可以像gridster一样吗?

时间:2012-10-30 07:30:17

标签: jquery jquery-ui jquery-ui-sortable

是否可以让jQuery ui Sortable grid表现得像gridster

为什么不使用gridster?因为它不适用于任何低于IE9的东西。

查看jQuery ui Sortable示例,如果将数字5拖到数字1,则数字1向右移动。当我使用gridster执行相同的操作时,数字1将移动到数字5的位置。即使使用不同大小的元素,它仍然可以继续工作。

是否有可能以类似的方式使jQuery ui Sotables网格工作?

2 个答案:

答案 0 :(得分:2)

几乎没有。所有jQuery的可排序方法都是改变父元素内元素的顺序。该网格中的“网格行为”只是浏览器的布局引擎正常运行(从左到右放置元素,同时它们适合父级width,然后从上到下放置)。另一方面,gridster模拟一个独立于其元素的网格:即使从一列中删除所有图块,它仍会占据屏幕上的空间。列上的元素是有序的,但是根据需要添加/删除行。

完全复制这种行为将是很多工作。我最接近the gridster demo行为的是connect lists示例,您可以将其设置为网格(example),但每个元素的大小相同。

答案 1 :(得分:1)

如果您知道如何使用jQuery库,那么有一个名为Isotope的jQuery插件以类似的方式工作:http://isotope.metafizzy.co/demos/fluid-responsive.html

如果您需要添加拖动事件,可以按照以下说明扩展同位素小部件:http://jstarrdewar.com/blog/2011/10/28/extend-jquery-draggable-to-work-with-isotope