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.
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.
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.
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.
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.
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 :)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With