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

【问题标题】：How do I drag a grid from one gridster to another gridster?如何将网格从一个 gridster 拖到另一个 gridster？
【发布时间】：2013-06-06 07:15:27
【问题描述】：

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

【问题讨论】：

这个问题解决了吗？我自己一直在尝试这样做。
@Rachanna Panchal 看到这个：stackoverflow
有人对此有其他想法吗？

标签： jquery jquery-ui gridster

【解决方案1】：

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

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

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

【讨论】：