Gridster当添加另一个窗口小部件和当前窗口小部件时，当前窗口小部件的位置未保存在数据库中

Question

我正在使用gridster.js。当我添加一个新的小部件时，当前小部件按照要求向下移动。但是我如何以及在哪里可以获得移动的小部件的更改位置以在db中保存它？

Answer 1

您可以使用serialize方法获取小部件位置。它返回一个可用作JSON对象的对象Array。

gridster.serialize();

示例输出：

[{"col":1,"row":4,"size_x":2,"size_y":2},{"col":3,"row":1,"size_x":1,"size_y":2},{"col":4,"row":1,"size_x":1,"size_y":1},{"col":2,"row":6,"size_x":3,"size_y":1},{"col":1,"row":7,"size_x":1,"size_y":1},{"col":1,"row":6,"size_x":1,"size_y":1},{"col":2,"row":7,"size_x":1,"size_y":1},{"col":2,"row":8,"size_x":1,"size_y":1},{"col":4,"row":7,"size_x":1,"size_y":1},{"col":2,"row":1,"size_x":1,"size_y":3},{"col":1,"row":8,"size_x":1,"size_y":2},{"col":3,"row":7,"size_x":1,"size_y":2},{"col":4,"row":8,"size_x":1,"size_y":1},{"col":2,"row":9,"size_x":3,"size_y":1},{"col":5,"row":1,"size_x":1,"size_y":2},{"col":5,"row":3,"size_x":1,"size_y":1},{"col":3,"row":10,"size_x":1,"size_y":1}]

演示here

修改

gridster.serialize_changed() //Call this after adding the new widgets

要获取具有更新位置的小部件的位置，您可以使用.serialize_changed()方法。它返回一个对象数组，表示已更改位置的小部件的当前位置。