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.

Show us the code you're using or create a jsFiddle so we can ***see*** what the problem is. — Phil Tune, Dec 11 '14 at 20:40

score 3 · Answer 1 · answered Feb 03 '15 at 14:15

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 :)

this actually works well. The only thing is using the minimized version of gridster it should be o.move_widget.... right after the resize_widget function. — peterpeterson, Feb 19 '15 at 16:46

score 2 · Answer 2 · answered Dec 12 '14 at 06:47

2

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.

answered Dec 12 '14 at 06:47

Pavel Reznikov

2,968
1
18
17

Hi thanks for the reply. I will try the method mutate_widget_in_gridmap ,one more thing that Is it possible to simply create the mouse down and mouse event and attach to the gridster widget (li) so that it can give the same effect ? – Meuk Light Dec 13 '14 at 11:30
I'm pretty sure you cannot do this. – Pavel Reznikov Dec 13 '14 at 16:59

Move Gridster Widgets programmatically

2 Answers2

Linked