10

如何将网格从一个 gridster 拖到另一个 gridster？

$(function () { //DOM Ready

    $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [160, 160]
    });

    var gridster = $(".gridster ul").gridster().data('gridster');
    $( ".draggable" ).draggable();
    $( ".gridster " ).droppable({
        drop: function( event, ui ) {
            $( ".draggable" ).removeAttr("style");
            gridster.add_widget('<li class="new"></li>', 1, 1);                 
        }
    });                         
});
4

1 回答 1

2

您可以使用 gridster API 的 remove_widget 和 add_widget 函数来添加和删除小部件。

要查看小部件是否被拖动，您可以查看鼠标的起始位置是否从您在小部件上按下鼠标时的onmousedown事件发生变化，直到您松开单击时发生的onmouseup事件。比较开始和结束位置以查看我们是否拖动了一个小部件，如果有，则通过将放置位置与所有网格对象的偏移量进行比较来检查我们是否将小部件拖动到其他网格对象之一上。如果我们将它放在任何其他网格上，只需调用remove_widget元素所在网格的add_widget函数并调用它应该放入的网格的函数。

我在这个 jsFiddle 中完成了大部分工作，它给出了一些错误，可能是因为 gridster.js 仍处于测试阶段：http: //jsfiddle.net/Ld2zc/11/

于 2014-07-23T11:03:10.507 回答