Gridster JS Performance Issue

Question

I've been struggling to figure out why GridsterJS is running so slow for me, I have a much larger project using gridster and performance is so bad I can't drag or resize any widgets on the page. I was shocked to see a much much slimmed down example behaving the same way: https://jsfiddle.net/h30pum3b/

#grid li {
    background-color: green;
    width: 200px;
    height: 200px;
    list-style: none;
}

<ul id="grid">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

$("#grid").gridster({
    widget_selector: "li",
    widget_base_dimensions: [200, 200],
    widget_margins: [10,10],
    avoid_overlapped_widgets: true
});

Any clues as to what may be happening here would be quite helpful... Thanks in advance.

score 1 · Answer 1 · answered May 26 '16 at 18:30

1

Found out why - comparing against examples, it was missing a class "gridster", add that class onto your gridster element before calling gridster() and the performance becomes whats expected. Thanks for the help Trey.

answered May 26 '16 at 18:30

Dan C

35
3

score 0 · Answer 2 · answered May 26 '16 at 18:20

0

You need to add the data attributes that gridster uses in order for it to work properly.

<li data-col="1" data-row="4" data-sizex="1" data-sizey="1"></li>

You can visit the gridster page and look at the HTML structure it shows to see what I mean. I made a couple tweaks to the CSS also, here is an updated fiddle: https://jsfiddle.net/h30pum3b/3/.

answered May 26 '16 at 18:20

Trey

5,480
4
23
30

Does this drag around smoothly for you? I still see very clunky behavior compared to their examples – Dan C May 26 '16 at 18:25
It seems to work better when I rollback jQuery to 1.11, also I suspect part of the clunkyness is that gridster creates a placeholder for the dragged element, which is also an `li`, and your CSS is applying to all of them, check this one out: https://jsfiddle.net/h30pum3b/5/ – Trey May 26 '16 at 18:30

Gridster JS Performance Issue

2 Answers2