添加“删除”后，Gridster无法正常工作

Question

I am using gridster and have added delete function so that I can delete the box. Now when I delete any one of the box, the alignment is distorted and there is a blank space left out. And also when I try to drag and drop the boxes to change their position, the boxes are overlapping.(Please refer image)

Every thing works fine if delete function is not applied.

I have created a jsfiddle.net/NMF5n/5/ Jsfiddle

Please help.

Thanks in advance.

Answer 1

Looking at Gridster website and demos http://gridster.net/#demos , I find a way to delete items:

gridster.remove_widget(... the item ...);

So using it in your sample:

$(".del_img").click(function(){
    gridster.remove_widget($(this).parent());
});

Where gridster is:

var gridster = $(".bla").gridster({
    widget_margins: [10, 10],
    widget_base_dimensions: [140, 140],
    widget_selector : "div",
    resize: {
        enabled: true
    }
}).data('gridster');

See fiddle updated: http://jsfiddle.net/NMF5n/7/