问题标签 [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 投票
1 回答
1653 浏览

jquery - 将网格存储在数据库中

我正在使用 jQuery gridster 并将位置保存在数据库中。我还有一个用于添加新网格的通用添加新按钮和一个删除按钮在每个网格中删除它。当用户移动、添加或删除时,我正在使用 ajax 调用。在数据库中有一个 user_id 和一个 jsonstring 字段。当用户拖动或单击删除/添加时,我将获取所有网格,创建一个 json 字符串并将其保存到数据库中。

添加新代码:

删除代码

保存gridster代码:

添加新功能效果很好。但是删除有问题。它正在破坏该项目,但仍然在每个函数中获取它。所以它被保存在数据库中。谁能告诉问题是什么?

谢谢。

0 投票
1 回答
9830 浏览

javascript - gridster,如何自动适应浏览器大小的变化?

我正在尝试找到一种自动调整 gridster 容器大小的方法。

在某种程度上,当用户更改浏览器大小时,相应的 gridster 小部件会调整大小。(其中列数和行数不会改变,但实际大小会)

随着浏览器大小的变化,我可以计算“widget_base_dimensions”的值,

但是我找不到更新/执行小部件以应对新尺寸的方法。

我正在寻找是否有支持这种功能的功能,我注意到

在 jquery.gridster.js 的第 3529 行,

我尝试了一些如何利用它们但失败了:(

如果有人成功使用此代码或解决问题,您能帮帮我吗?

0 投票
2 回答
13187 浏览

javascript - 调整大小后获取 Gridster 小部件的新大小

使用Gridster,我们使用resize.enabledconfig 选项创建了一个带有可调整大小的小部件的网格。

在用户完成调整 Gridster 小部件的大小后,我们希望获得小部件的新最终大小。我们应该怎么做?

0 投票
1 回答
1559 浏览

gridster - 手动调整大小后获取新的 Widget 高度和宽度

在使用手动调整我的小部件的大小后

我需要获得新的小部件尺寸,但我总是得到旧的高度。我需要等待几毫秒才能获得正确的新高度和宽度。

当 Grister 完成调整大小小部件时,有什么方法可以获取事件?

0 投票
5 回答
9579 浏览

jquery - 如何通过他动态创建的 id 从 gridster.js 中删除单个小部件

我需要知道如何通过他使用 gridster.add_widget 动态创建的 id 来删除单个 gridster.js 小部件。创建的每个新小部件都有一个自己的按钮来删除该单个小部件,但我无法使其工作。

这是我的代码

对于添加小部件,它工作正常,但我无法删除小部件。

0 投票
1 回答
723 浏览

knockout.js - 使用 Gridster 和 Knockout.js 绑定小部件 HTML 内容

这与在Widget binding with Gridster and Knockout上发布的另一个主题有关

小部件绑定很好,但是我试图在每个小部件中绑定值。因此,将以下数据设置视为可观察数组

我在每个小部件中都有以下 HTML 绑定

输入新值时 UI 不会更新。见http://jsfiddle.net/Be4cf/31/

0 投票
1 回答
3831 浏览

javascript - 如何在 gridster 中获取单个小部件(li)JSON?

我正在尝试在第二个文本区域中获取单个小部件的 (li) JSON/位置。我尝试了很多来找到它,但它无法正常工作。

如果有人可以帮助我,我将与您分享我的代码。如果有人不知道 gridster,请找到下面的链接作为参考。 http://gridster.net/demos/serialize.html

0 投票
1 回答
601 浏览

javascript - 在带有闭包的循环中创建多个 gridster 实例以调用具有不同参数的相同回调

我目前正在研究基于 gridster 的 CMS 模块,它需要让最终用户创建不同的布局,以多次实例化 gridster。

当我遍历应该设置的网格数量并尝试根据定义它们的迭代定义应该使用不同参数调用的回调时,我的问题出现了:当我测试它们时,它们似乎继承了(最后) 相同的值。

我认为这是一个关闭问题,我正在努力解决这个问题,即使阅读了这个论坛的几篇帖子,但没有成功,如果有人能给我一个提示,让我走上正确的道路,我将不胜感激。

这是我的代码:

网格建立起来,没关系。如您所见,我正在尝试调用一个函数作为拖动动作停止的回调,并且应该使用不同的参数调用该函数。我发现似乎与我需要的相似,但不幸的是我对咖啡脚本一无所知,并且从'do'的咖啡脚本文档(coffescript.org)我看不出我做错了什么。预先感谢您的任何帮助

0 投票
2 回答
915 浏览

css - 使文本在 Gridster 的框中垂直对齐不起作用

我想在 Gridster 网格内有一个文本,并使其text-align: centervertical-align: middle.

<li><span>Text</span></li>

我试过这个:

只有text-align作品。我不能使用line-height,因为每个网格的高度根据用户选择的不同而不同。

我假设因为它没有直接的高度和宽度,这就是为什么 margin:auto 0px;也不起作用。他们通过数据属性获得高度和宽度。

有谁知道 Gridster 的 css 行为?如何在网格内垂直居中元素(图像或文本)?

这就是我通过 Ajax 添加元素的方式

更新

我删除了演示,因为它不再公开了。我上传了我的解决方案。使用表格单元格显示它不起作用,但是如果您以某种方式查询当前网格的大小-y,您可以将其除以 2 并乘以比标准网格大小略小的值,具体取决于您的字体大小将在盒子内使用。

0 投票
1 回答
1681 浏览

javascript - 可拖动的 DIV(使用 gridster.js)和内联编辑不起作用

我想用gridster构建一个可拖动的网格,并希望contenteditable = true在每个可拖动的 DIV 中启用。但是目前我只能拖动DIV,似乎gridster.js正在推翻点击事件或其他东西,所以该contenteditable = true参数无法识别我点击进入DIV。

我试图定义一个可拖动的句柄,以便可以使用该句柄拖动 DIV(这适用于 jQuery UI 可拖动),但这也不起作用。

是否可以拖动 DIV,当用户双击时,他单击的 DIV 可以编辑?

我的 HTML 代码如下所示:

我的 js 看起来像:

目前,双击后 gridster.js 将被禁用,但之后内容不可编辑。

编辑:似乎事件有问题focus()。当我明确注册click()事件并focus()在可编辑元素上调用 a 时,我可以编辑文本!