在移动断点之后在angular-gridster2中从左到右排序gridster项目

Posted

技术标签:

【中文标题】在移动断点之后在angular-gridster2中从左到右排序gridster项目【英文标题】:Order gridster items from left to right in angular-gridster2 after mobile breakpoint 【发布时间】:2021-05-25 09:23:22 【问题描述】:

我已经实现了 angular-gridster2 来容纳几个小部件。它们都工作正常并且在浏览器中显示时就位。但是当在移动视图中使用相同的视图时,它们会一个一个地堆叠在一起,只有一列这很好,但问题是项目的顺序是随机的。有没有一种方法可以让小部件按照它们在 Web 视图中的从左到右的位置进行排序。

我正在使用的gridster的配置:

  
   "gridType":"fixed",
   "fixedColWidth":125,
   "fixedRowHeight":125,
   "swap":false,
   "pushItems":false,
   "displayGrid":"none",
   "draggable":
      "enabled":false
   ,
   "resizable":
      "enabled":false
   ,
   "minCols":12,
   "maxCols":20,
   "minRows":12,
   "margin":15,
   "disableWindowResize":false,
   "scrollToNewItems":true,
   "disableWarnings":false,
   "ignoreMarginInRow":false,
   "disableScrollHorizontal":false,
   "disableScrollVertical":false,
   "minItemCols":1,
   "minItemRows":1,
   "compactType":"none",
   "isMobile":true,
   "api":
      
   

【问题讨论】:

【参考方案1】:

你不能。移动设备中的排序基于将它们添加到 gridster-items 数组中的顺序,gridster 不做任何额外的排序。

如果您想在移动视图中重新排序,则必须更改该网格项目数组中的顺序。

【讨论】:

以上是关于在移动断点之后在angular-gridster2中从左到右排序gridster项目的主要内容,如果未能解决你的问题,请参考以下文章

如何使 textarea 元素填充整个父 div 网格框(使用 angular-gridster2 或 gridster 库)?

Angular ui-sortable + angular-gridster

可在 angular-gridster 中的小部件之间拖动

text 在Divi中更改移动菜单断点

怎样设置断点

Ps钢笔操作技巧