使用Gridster.js启用拖放功能

时间:2013-04-28 18:11:06

标签: javascript jquery gridster

我正在尝试使用Gridster.js来设置可编辑的拖放网格(as per the example here on their home page)。

我已经设置了一个非常基本的例子,让它工作 - 它看起来很棒,我可以选择要移动的元素,但是一切都只是重置回原始位置,而其他形状都没有取代广告我正在拖动一个元素(如果你看到他们的例子,当你拖动一个元素时,其他元素会实时移动)。

我的html符合他们的建议:

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

我的JS在主页上按照他们的说法:

 var gridster;
  $(function(){

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

  });

有没有人有任何想法?有人用过这个图书馆吗? (我在chrome控制台等开发工具中没有记录任何错误)

1 个答案:

答案 0 :(得分:5)

要使其工作,您需要从无序列表中删除ready类。 Gridster在正确加载插件时自动添加它,因为它已经存在,它无法正确加载。