Question

我正在使用gridster.js并试图想出一个很好的方法来设置它，我可以将其中一个小部件拖动到像div这样的“垃圾桶”并让它从网格中删除该小部件。如果有人对此有任何想法会很棒。这是我发现的，但是试图找出使其与gridster一起使用的最佳方法。

$(".widget").draggable();
    $('#trash-can').droppable({
        drop: function(event, ui) {
            $(ui.draggable).remove();
        }
    });

有什么想法？提前谢谢。

Answer 1

我意识到这个问题有点老了，我不确定你是否还在寻找解决方案，但我能够通过在gridster网格中创建一个div并以不同方式设置它来实现这一目标。

我在初始化gridster时定义了一个停止函数，就是坐标在这个div里面，删除了widget。

var gridster = $(".gridster ul").gridster({
      widget_base_dimensions: [100, 55],
      widget_margins: [5, 5],
      draggable: {
         stop: function(e, ui, $widget) {
         console.log(ui);
            if (ui.position.left >435 ) gridster.remove_widget(ui.$helper[0]);
        }
      }
    }).data('gridster');

这是一个有效的（虽然非常简陋）小提琴：http://jsfiddle.net/nrC4J/

Answer 2

我也意识到这个问题已经过时了。然而，它仍然出现在搜索的顶部。我认为你在删除drop方法中的元素时走在了正确的轨道上。

我修改kayladnls小提琴使用你的方法，但不是只删除它，使用gridter的删除。

这是演示拖动到垃圾桶到删除功能的小提琴。 http://jsfiddle.net/nrC4J/46/

编辑：为了让它能够使用当前版本的JQuery，你需要使用当前版本的jquery-ui：这里是jquery 2.1.0和jquery-ui 1.11.4的小提琴http://jsfiddle.net/nrC4J/52/

$(function () {

    // initiate Gridster
    var gridster = $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [100, 100],
    }).data("gridster")

    // set lis to Jquery draggable elements
    $(".gridster li").draggable();

    // set up drop space
    $('#log').droppable({
        drop: function (e, ui) {
            gridster.remove_widget(ui.helper.css('display', 'none'))
        }
    });

});

Gridster通过拖动到div删除小部件

2 个答案: