Move Gridster Widgets programmatically

Question

I am trying to move Gridster widget programmatically , I want to achieve the effect like dragging the gridster widget .

Currently i am assigning data-col and data-row attribute using Jquery but the gridster widget simply just overlapped with other gridster widgets and other widgets are not repositioning like they do while dragging the gridster widget .What should i do ? TIA.

Answer 1

I didn't find a corresponding API method, but you can check a mutate_widget_in_gridmap function: http://gridster.net/docs/files/src_jquery.gridster.js.html#l496

Also you can check similar library gridstack.js: https://github.com/troolee/gridstack.js I've started this library because of gridster limitations. It's responsive, bootstrap v3 and knockout friendly. The library is under active development so I can implement any reasonable feature requests.

Answer 2

I encountered the same problem, while trying to create an animation loop for a gridster dash. I have added a new function to the gridster src, which is basically just a very simple rewrite of the resize_widget API function. This in itself just uses mutate_widget_in_gridmap as pointed out by @Pavel.

I added the following after Resize_widget function:

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;
};

Works like a charm for me. Tell me if you can come up with a good way to smooth the transition with JQuery or something :)