问题标签 [gridstack]

我正在尝试设置 gridstack.js 以使用我的 vue 组件，就像它在这个淘汰赛示例中所做的那样：https ://github.com/troolee/gridstack.js#use-with-knockoutjs/ 。

这是我所拥有的代码笔：https ://codepen.io/nyoung697/pen/BperoZ

1. 单击“文本框”3 次，将 3 个文本框添加到表单中。
2. 通过将鼠标悬停在顶部并单击垃圾桶来删除顶部文本框。

从上到下删除它们效果很好（看起来如此）。最新的元素位于顶部，因为 gridstack 将其添加到顶部。所以这是数组中的最后一个元素。

1. 现在尝试调整文本框的大小并以随机顺序删除它们。

Gridstack 变得混乱并在页面上交换元素。我不知道它为什么这样做。有人可以帮我解决这个问题吗？几个星期以来，我一直在兜圈子，尝试了很多不同的事情。

我添加了一些控制台日志记录以显示正在引用的 id。当您按照添加的最后一个元素的顺序删除元素时，“destroyed”方法中的 id 与所有其他被命中的方法/钩子相同。但是，如果您尝试以随机顺序删除它们，那么在被破坏的方法中打印的 id 是不同的。

销毁：

这是我第一次尝试使用 bower 包和 NPM。我正在尝试使用 Gridstack.js- link。

我错过了什么？任何帮助或输入将不胜感激。

这是我的html的标签：

我正在使用 c3.js 和 gridstack.js 来做这个。我想要做的就是删除那个滚动条，但我尝试过的都没有奏效。

JSFiddle 演示

我正在使用 Gridstack 库来创建仪表板。小部件 x、y、宽度和高度可以放入 json 中，我正在尝试将此 json 保存到 MySQL 中。

当我在大学时，我通过按一个按钮工作，让 json 数组进入 MySQL 中的一个表。当我回家时，它停止工作。我正在使用 PHP 和 MySQL。

第一个问题是下面的行停止工作（我回家之前很好，没有接触代码）。

不得不改成这样：

不知道为什么。其余的 PHP 也停止工作。没有错误，只是什么都不做。这不是我有问题的脚本。所有的 Javascript 都可以正常工作。

其余代码：

我用过http://troolee.github.io/gridstack.js/demo/knockout.html。现在，我想在这些小部件中添加我自己的带有 id 的 div 元素。添加到不同小部件的 div 元素会根据某些条件而有所不同。如何使用 knockout.js 做到这一点？

我正在使用带有 Knockout.js 的 Gridstack。我正在使用http://troolee.github.io/gridstack.js/demo/knockout.html创建 Gridstack 小部件。我在其中一个小部件中添加了谷歌地图。地图出现一个滚动条。另外，我需要有某种标题，因为它处于当前状态。主要问题是地图的尺寸​​是固定的，当我调整小部件的大小时，地图不能自动适合小部件。这是我的完整代码：

我正在尝试为gridstack制作可重用的组件。

我找不到一种简单的方法来做类似于vue 1this.$compile中的方法的事情。我见过这个例子。

这是我的Vue脚本：

这是相关的html：

问题是：

该方法addGraph完美地工作，当addWid- 没有。即使直接作为组件插入到 html 中，它也可以工作。

我猜这是因为组件中的 html 没有被预编译。它compile在 vue1 中解决了。

我已经尝试过的：

1. Mount，正如这里所建议的那样，但它不起作用，因为它看不到已定义的组件，我猜
2. push正如这里所建议的那样，我已经看到有可能使它与它一起工作。但是我的vue知识还没有那么强，我找不到让它以这种方式工作的方法，因为会有几种类型的块，并且它们都应该被gridstack视为相同的元素。此外，同一个组件可以在一块板上多次使用，但参数不同。
3. 我已经看到有一种方法来编译 a standalone component，就像这里，但看起来它是非常不推荐的，所以我正在寻找其他方法。
4. 我也看过这些 render functions，但又一次 - 不幸的是，我的技能应用它并不好。

所以，总结一下——我真的很感激关于这些方法的一些建议，或者可能是关于其他实现方式的建议。问题是我还应该依靠gridstack脚本，而不是简单地插入元素。

谢谢！

UPD：d-widget的定义：

这基本上是单个组件，在名为 Widget.vue 的单独文件中定义

我正在使用 Gridstack js 为仪表板创建可拖动/可调整大小的小部件。图片显示了一个示例小部件。我保留了默认的可拖动值，我可以通过双击小部件内的任意位置来拖动它。我想要做的是仅通过单击灰色区域使小部件可拖动。是否应该为此覆盖默认的可拖动值？如果有怎么办？我对 jquery/js 很陌生，在互联网上找不到类似的东西。

我正在尝试使用 gridstack.js 存储框的顺序，因为它们出现在页面上

目前，它们按照它们在 HTML 中出现的顺序排列，而不是它们在页面上的布局方式。这是一张图片来进一步解释我正在尝试做的事情：

我用来设置顺序的代码：

控制台输出打印这个

似乎它只是得到任何随机顺序，而不是从左到右

有没有解决的办法？

我在Ember.Js 的 html 页面中应用 GridStackJS 的data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="3" 属性项目，但它不工作。

我使用了 GridStack 的 js 文件和 css 文件，它在网络中正确加载。在拖动任何元素时，它正在正确移动，但在失去鼠标控制时又回到了原来的位置。我认为这是因为它无法检测到使用data-gs-xx属性实现的位置。