Question

我正在尝试以编程方式移动Gridster小部件，我想实现拖动网格小部件的效果。

目前我使用Jquery 分配data-col 和数据行属性但 gridster小部件只是与其他重叠gridster小部件和其他小部件没有像拖动gridster小部件那样重新定位。我该怎么办？ TIA。

Answer 1

我没有找到相应的API方法，但您可以查看mutate_widget_in_gridmap函数：http://gridster.net/docs/files/src_jquery.gridster.js.html#l496

你也可以查看类似的库gridstack.js：https://github.com/troolee/gridstack.js由于网格限制，我已经启动了这个库。它响应迅速，引导v3和淘汰赛友好。该库正在积极开发中，因此我可以实现任何合理的功能请求。

Answer 2

我在尝试为gridster破折号创建动画循环时遇到了同样的问题。我在gridster src中添加了一个新函数，它基本上只是对resize_widget API函数的一个非常简单的重写。这本身只是使用@Pavel指出的mutate_widget_in_gridmap。

我在Resize_widget函数之后添加了以下内容：

fn.move_widget = function($widget, new_col, new_row, callback) {
    var wgd = $widget.coords().grid;

    var new_grid_data = {
        col: new_col,
        row: new_row,
        size_x: wgd.size_x,
        size_y: wgd.size_y
    };

    this.mutate_widget_in_gridmap($widget, wgd, new_grid_data);

    this.set_dom_grid_height();
    this.set_dom_grid_width();

    if (callback) {
        callback.call(this, new_grid_data.col, new_grid_data.row);
    }

    return $widget;
};

对我来说就像一个魅力。告诉我你是否能想出一个很好的方法来平滑JQuery或其他东西的过渡：）

以编程方式移动Gridster小部件

2 个答案: