Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Move Gridster Widgets programmatically

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.

like image 476
Meuk Light Avatar asked Dec 11 '14 17:12

Meuk Light


People also ask

How to move widgets and arrange them on the widgets board?

To move widgets and arrange them on the widgets board in Windows 11, left click and hold on a widget, and then move your mouse to move the widget to wherever you want the widget to be. The widgets will automatically snap to each other in fixed grids on the widgets board upon being moved next to each other.

How to add more widgets to the widgets board in Windows 11?

To add more widgets to the widgets board in Windows 11, follow the steps below. Open Widgets by clicking on the widgets button on taskbar or by pressing Win + W keys. On the Widgets board, click on the “Add widgets” button below the widgets or on your profile picture to open the widget settings.

How do I remove a widget from the widgets board?

To remove a widget from the widgets board in Windows 11: Click on the triple dotted More (…) button in the top right corner of the widget you want to remove. Then, click on Remove widget. A removed widget will be reset in the widget settings.

How to move a widget to another spot in Windows 11?

You can move a widget to another spot on your widgets board to rearrange widgets to the location you want. To use the widgets board, you need to be signed in to your Microsoft account, your work account, or your school account. This tutorial will show you how to move a widget on the widgets board for your account in Windows 11.


2 Answers

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

like image 196
badrequest400 Avatar answered Oct 11 '22 17:10

badrequest400


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.

like image 43
Pavel Reznikov Avatar answered Oct 11 '22 18:10

Pavel Reznikov