gridster.js
gridster.js copied to clipboard
widgets reshuffling after rendition
Hi,
I have developed a UI designing tool which can drag and rearrange its widgets using gridster. and while rendering this UI. I am reading the array from one collection and calling gridster.addwidget() method. it's all working fine if the column and row dimensions are in order(see below)
sample : {element,size_x,size_y,col,row}
var widgets = [ {'<li>0</li>', 1, 1,1,1}, {'<li>1</li>', 1,1,2,1}, {'<li>2</li>', 1, 2,4,1}, {'<li>2</li>', 1, 2,1,2} ];
but its breaking and reshuffling automatically in some scenarios when the column and row dimensions are in random order(see below)
var widgets = [ {'<li>0</li>', 1, 2,1,2}, {'<li>1</li>', 1,1,4,1}, {'<li>2</li>', 1, 2,1,3}, {'<li>2</li>', 1, 1,1,1} ];
its actually rendering the first item on the second row but since the first row not rendered yet it's staying on the first then when the first row renders its moves down properly.. but sometimes it automatically rearranges its positions. any help to resolve this problem is highly appreciated as we are facing this in the production
seems like the grid could be collapsing into itself while the widgets are being added. You can disable this behavior by using the following options when you initialize gridster:
shift_widgets_up: false,
shift_larger_widgets_down: false,
sorry for the late reply and I hope this solves the issue.