Question

我正在尝试使用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控制台等开发工具中没有记录任何错误）

Answer 1

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

使用Gridster.js启用拖放功能

1 个答案: