Angular-gridster不适用于小屏幕

Question

问题

我注意到angular-gridster停止工作，如果浏览器窗口最小化到那里，网格图块周围的空间不大（见图2）。最大化后退窗口时，gridster正常工作，元素可以拖动并再次调整大小。

进度

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

拨弄

此外，我注意到可以找到相同的行为 this fiddle - ＆＃34;结果＆＃34;窗口的高度/宽度必须相当大，所以演示会起作用。

我没有包括我的项目代码，因为我觉得它没用，因为我在angular-gridster的每个演示中都看到了这种行为。 有没有人遇到过同样的问题？

感谢。

截图：工作

屏幕截图：无效

Answer 1

这似乎是设计上的。正如您所看到的here，angular-gridster有一个所谓的“移动模式”，这意味着插件将在某个（可配置的）屏幕宽度下停止工作：

$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它将工作。如果我们需要最小div宽度，我们需要根据div宽度更改mobileBreakPoint值

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