Question

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

$(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);                 
        }
    });                         
});

Answer 1

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

要查看是否拖动了窗口小部件，您可以查看鼠标的开始位置是否已从使用onmousedown事件在窗口小部件上按下鼠标时更改，直到您放开点击onmouseup事件。比较开始和结束位置以查看我们是否拖动了一个小部件，然后如果我们这样做，请检查我们是否通过将放置位置与所有gridster对象的偏移量进行比较来拖动其中一个其他网格上的小部件。如果我们将它放在任何其他网格上，只需调用该元素所在的gridster的remove_widget函数，并调用它应放入的gridster的add_widget函数。

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

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

1 个答案: