Gridster.js 删除一个小部件

Question

我在网页中使用 Gridster.js，我正在尝试删除一个带有悬停在 image.To 上的按钮的小部件，我是否使用函数 gridster.remove_widget() 我在插件网站的文档中找到 http://gridster.net/ 来删除我的小部件，但它在这里不起作用是我的 HTML :

        <div class="gridster">
          <ul style="height: 480px; position: relative; ">
            <li data-id="1" data-row="1" data-col="1" data-sizex="2" data-sizey="1" class="gs_w">
                <img src="img/icon.png"/>
                <img src="img/mod.png" class="mod 1"/>
                <img src="img/close.png" data-close="1" class="close"/>
            </li>
            <li data-id="2" data-row="3" data-col="1" data-sizex="1" data-sizey="1" class="gs_w">
                <img src="img/icon.jpg"/>
                <img src="img/mod.png" class="mod 2"/>
                <img src="img/close.png" data-close="2" class="close"/>
            </li>

            <li data-id="3" data-row="3" data-col="2" data-sizex="2" data-sizey="1" class="gs_w">
                <img src="img/icon3.jpg"/>
                <img src="img/mod.png" class="mod 3"/>
                <img src="img/close.png" data-close="3" class="close"/>
            </li>
            <li data-id="4" data-row="1" data-col="3" data-sizex="2" data-sizey="2" class="gs_w"><img src="img/icon5.jpg"/>
                <img src="img/mod.png" class="mod 4"/>
                <img src="img/close.png" data-close="4" class="close"/>
            </li>

            <li data-id="5" data-row="1" data-col="5" data-sizex="1" data-sizey="1" class="gs_w">
                <img src="img/icon2.jpg"/>
                <img src="img/mod.png" class="mod 5"/>
                <img src="img/close.png" data-close="5" class="close"/>
            </li>

          </ul>
        </div>

所以我在我的照片上设置了 2 个小图标，一个用于修改，另一个用于删除小部件/图像，但是删除按钮不起作用。

这是我的 JS 文件：

var gridster = "";
$(document).ready(function () {
    $(".gridster ul").gridster({
        widget_margins: [1, 1],
        widget_base_dimensions: [140, 140],
        shift_larger_widgets_down: false
    });

    $(".gs_w").hover(function (){
        var id = $(this).attr("data-id");
        //show close button on hover
        $("ul").find("[data-close='" + id + "']").show();
        //show modifie button on hover
        $("."+id).show();
    });
    $(".gs_w").mouseleave(function (){
        var id = $(this).attr("data-id");
        //hide close button on hover
        $("ul").find("[data-close='" + id + "']").hide();
        //hide close button on hover
        $("."+id).hide();
    });
    $(".close").click(function(){
        var id=$(this).attr("data-close");
        console.log(id);
        //$("ul").find("[data-id='" + id + "']").remove();
        gridster.remove_widget($("ul").find("[data-id='" + id + "']"));
    });
});

对不起我生疏的英语...

Answer 1

当你声明你的 gridster 时，你需要在它的末尾添加 data('gridster') 并将其附加到一个变量，例如 gridster。然后你就可以使用gridsterapi了。这是工作示例：

var gridster = "";
$(document).ready(function () {
    gridster = $(".gridster ul").gridster({
        widget_margins: [1, 1],
        widget_base_dimensions: [140, 140],
        shift_larger_widgets_down: false
    }).data('gridster');

    $(".gs_w").hover(function (){
        var id = $(this).attr("data-id");
        //show close button on hover
        $("ul").find("[data-close='" + id + "']").show();
        //show modifie button on hover
        $("."+id).show();
    });
    $(".gs_w").mouseleave(function (){
        var id = $(this).attr("data-id");
        //hide close button on hover
        $("ul").find("[data-close='" + id + "']").hide();
        //hide close button on hover
        $("."+id).hide();
    });
    $(".close").click(function(){
        var id=$(this).attr("data-close");
        console.log(id);
        //$("ul").find("[data-id='" + id + "']").remove();
        gridster.remove_widget($("ul").find("[data-id='" + id + "']"));
    });
});

Gridster.js 删除一个小部件

Gridster.js removing a widget

javascript

jquery

gridster