问题标签 [gridster]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
735 浏览

jquery - Gridster 调整停止 id

我有一个 gridster 网格工作,我正在尝试获取<li>已调整大小的项目的 id。

resize: { enabled: true, stop: function (e, ui, $widget) {
//Need the id of the item that was just resized } }

0 投票
4 回答
2402 浏览

javascript - 使 gridster.js 瓷砖贴在特定的网格位置(对齐网格)

有没有办法让 Gridster.js 瓷砖粘住,而不是垂直向上移动以填充空白空间。有点像打开对齐网格的布局程序的工作方式......

0 投票
1 回答
917 浏览

javascript - Gridster,添加小部件时放置错误

我将 Gridster 用于我的第一个 Javascript 项目之一,但遇到了问题。

当我将一个小部件添加到我的网格时,它不会去我想要的地方,这是我项目示例的jsfiddle

当我在拖放区中拖放时,会创建一个小部件,但不在正确的位置。相反,它将其放置在网格之外。当我手动移动它时,它会进入网格。添加新小部件时,如果将其放在第一列和第一行中,则可以看到它位于第一个小部件的后面。

问题

我能做些什么来解决这个问题?

0 投票
1 回答
6709 浏览

jquery - 使用 window.resize(或其他方法)触发 jquery 函数并使 gridster.js 具有响应性的有效方法

我一直在修改一些关于使 gridster.js 响应的迂回方式的想法。我在gridster的github问题中找到了一个代码片段,并意识到如果我在特定的窗口大小下运行它并销毁并重新运行gridster,我可以获得gridster响应responsivley的效果。让我告诉你我的意思——

因此,当 gridster 应该分成 1 列(它的基数为 4)时,它会破坏并用 1 列重新运行。这工作得非常好,问题是这不是实现这一目标的好方法。我也没有显示所有断点(它根据窗口大小分成 3 -2 -1 列)。它运行得非常糟糕,因为它会在每个窗口调整大小时触发,我想知道是否有一种更简洁的方法可以做到这一点,其中函数在达到窗口大小时只会触发一次。

另外 - 这只是缩小 gridster 的大小所以如果你缩小它不会扩大,我还没有尝试构建这些功能。

使用可能没有监听窗口重新调整大小的每个实例的任何指示或建议都会非常有帮助。

谢谢!!

0 投票
1 回答
598 浏览

ember.js - 如何获取生成的 Ember.Component HTML

我正在使用 Emberjs 和 Gridsterjs 创建某种编辑器。我发现您需要制作一个组件以在 Emberjs 中包含一个 jQuery 插件。在该组件内部,我有许多组件将成为 Gridster 的小部件。

这就是我设置模板的方式:

现在我创建了一个按钮,允许用户将小部件添加到 Gridster,但我无法找到一种方法来为组件中的小部件提供请求的 HTML 字符串。

我试过这个:

和这个:

但这似乎行不通。

问题
我的问题是如何创建 gridster 期望的 html 字符串并保留用于编辑内容的 ember 功能。

0 投票
3 回答
3226 浏览

jquery - Gridster.js draggable div with content

There is a known issue with gridster that if you have content inside your drag handle, you will not be able to drag with it. I got a response from the creator saying use ignore_dragging to handle this, but I have tried it for a few hours now with no luck. This is the example I was provided with

http://jsbin.com/fuwunuyi/6/edit

I have tried using this in many different ways for a few hours now and cannot seem to get this working. Has anyone successfully gotten this to work?

Just in case - here is the documentation for the ignore_dragging - [ignore_dragging] Object | Function optional Array of node names that should not trigger dragging, by default is ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON']. If a function is used return true to ignore dragging. (http://gridster.net/docs/classes/Draggable.html).

Any help would be much appreciated!!

0 投票
1 回答
1183 浏览

javascript - HighStocks 可拖动元素干扰 gridster 拖动

我正在使用 HighStocks 的股票图表和 gridster。gridster 中的每个单独的块都可以自由拖动。但是,股票时间滑块小工具也可以拖动和调整大小。由于它位于 gridster 小部件的顶部,因此每当我拖动滑块时,整个小部件也会移动。我包含了一个 JSFiddle 来证明我的观点。 http://jsfiddle.net/faPrd/

它在这个 Fiddle 中没有那么明显,因为没有那么多元素,但是您已经可以看到,当您拖动滑块时,整个小工具会发生一些变化。我怎样才能防止这种情况?

我的 HTML:

我的gridster Javascript:

0 投票
0 回答
519 浏览

drag-and-drop - 元素的可拖动布局。像 gridster.js

我想要一个带有可拖动元素的页面。像这样的东西

网格演示

唯一的区别是我希望用户不仅可以选择调整大小,还可以选择隐藏和显示元素。(类似于仪表板)

我最接近的是: 角度仪表板,但遗憾的是我不想使用 angular.js

我想看看你们是否知道这样的图书馆。

谢谢

0 投票
1 回答
678 浏览

javascript - ng-show 方法未在自定义、$compile'd 指令中执行

我继承了这个代码集,我想我明白发生了什么,但我似乎无法让 ng-show 在自定义的 $compile'd 指令中工作。我怀疑它可能与gridster有关,但我已经尝试过你会看到注释掉的行,效果相同。

这是一个非常简化的版本,因为我无法公开我正在处理的代码。我并没有真正制作恐龙应用程序,尽管那可能很好。

我不能为此使用 templateUrl,因为我们需要将每个结果添加到 gridster。还有很多事情要做。只要相信我不能:(

页面开头如下:

当恐龙网络服务完成并且我们点击 $watch 时,页面最终将变为:

问题是 isExtinct 方法永远不会被调用。

我尝试了以下方法,得到了相应的结果:

  1. 将 isExtinct 移至 'tarpit' - 它被执行,但我失去了我是哪种恐龙的上下文。我尝试将 $element 传递给它,但它仍然未定义。
  2. ng-show="$parent.isExtinct()" - 它不会被调用。
  3. 使用标志而不是方法。结果与上述相同。
  4. 将 isExtinct 放在 tarpit 指令内的 controller() 中。结果与#1 相同。该方法被调用,但不知道是哪个恐龙调用了它。

在这一点上,我会满足于#1,只要我能保持对我是哪种恐龙的想法,例如将 $element 传递给父方法,甚至只是 attr.dinosaurId。 我不能依赖将它们附加到恐龙数组的映射顺序,因为 gridster 会重新排列它们。

0 投票
0 回答
234 浏览

jquery - Gridster : 如何用 gridster 取消最后一步?

我在一个拖放项目中,我使用gridster。而且我需要在确认后才采取行动,但这不是很聪明。我使用了点击事件,但事件的想法会很有用。这是我的 JS 代码。非常感谢您的帮助