Angular-gridster 在小屏幕上不工作

Question

问题

我注意到，如果浏览器 window 最小化到 gridster 磁贴周围没有太多 space 的程度（见图 2），angular-gridster 将停止工作。然而，gridster 在最大化 window 时工作正常，并且元素再次可拖动和调整大小。

进度

我修改了相关控制器中的$scope.gridsterOpts对象，确保pushing, floating, swapping都设置为true，但并没有解决问题。

fiddle

此外，我注意到在 this fiddle - “结果”window 在 height/width 中必须非常大，这样演示才能运行。

我没有包含我的项目代码，因为我认为它没有用，因为我在 angular-gridster 的每个演示中都看到了这种行为。

有没有人遇到过同样的问题？ 谢谢。

截图：工作

屏幕截图：不工作

Answer 1

这似乎是设计使然。如您所见，here、angular-gridster 有一个所谓的 "mobile mode"，这意味着插件将在某个（可配置的）屏幕宽度以下停止工作：

$scope.gridsterOpts = {
    /// (...)
    isMobile: false, // stacks the grid items if true
    mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
    mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
    /// (...)
};

Answer 2

mobileBreakPoint 是一个更重要的想法。 mobileBreakPoint 600 的值意味着如果我们设置 div 宽度大于 600px 它将占据屏幕宽度的一半，它将 work.If 我们需要最小 div 宽度我们需要改变mobileBreakPoint 值基于 div 宽度

$scope.gridsterOpts = { mobileBreakPoint: 100, // 如果屏幕不宽，移除网格布局并堆叠项目 };