javascript - 使用 Gridster.js 启用拖放

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 会自动添加它，因为它已经存在，所以无法正确加载。