Enabling drag and drop with Gridster.js

Question

I am attempting to user Gridster.js to have an editable drag and drop grid (as per the example here on their home page).

I have setup a really basic example, to get it working - it all appears great, and I can select elements to move, but everything always just resets back to the original position, and none of the the other shapes get displace ad I am dragging an element (If you see their example, as you drag one element, the others get displaced in real time).

My html is as per their recommendation:

<div class="gridster ready">
    <ul style="position: relative; height: 360px;">
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2" class="gs_w widget-orange">loading</li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="1" class="gs_w widget-orange">loading</li>
        <li data-row="2" data-col="3" data-sizex="1" data-sizey="1" class="gs_w widget-orange">loading</li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="gs_w widget-orange">loading</li>
        <li data-row="2" data-col="4" data-sizex="1" data-sizey="1" class="gs_w widget-orange">loading</li>
    </ul>
</div>

And my JS is as per theirs on the home page:

 var gridster;
  $(function(){

    gridster = $(".gridster > ul").gridster({
        widget_margins: [20, 20],
        widget_base_dimensions: [140, 140],
        min_cols: 6
    }).data('gridster');

  });

Does anyone have any ideas? has anyone used this library? (I don't have any errors logged in dev tools in chrome console etc)

Answer 1

To make it work you need to remove the ready class from the unordered list. Gridster adds it automatically when it loaded the plugin correctly, because it's already there, it doesn't load properly.