6

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

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

有什么想法吗？提前致谢。

4

2 回答 2

2

我意识到这个问题有点老了，我不确定你是否还在寻找解决方案，但我能够通过在 gridster 网格中创建一个 div 并对其进行不同的样式来实现这一点。

我在初始化 gridster 时定义了一个停止函数，即坐标在这个 div 内，删除小部件。

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/

于 2013-11-28T05:03:21.537 回答
0

我也意识到这个问题很老了。但是它仍然出现在搜索的顶部。我认为你在 drop 方法中删除元素是正确的。

我修改了 kayladnls fiddle 以使用您的方法，但不仅仅是删除它，而是使用 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'))
        }
    });

});
于 2015-02-27T21:23:41.173 回答