Как перетащить сетку из одной сетки в другую сетку?

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

Ответ 1

Вы можете использовать функции remove_widget и add_widget API-интерфейса gridster для добавления и удаления виджетов.

Чтобы увидеть, перетаскивается ли виджет, вы можете увидеть, изменилась ли начальная позиция мыши при нажатии мыши на виджет с событием onmousedown, пока вы не отпустите клик, событие onmouseup. Сравните начальную и конечную позиции, чтобы увидеть, перетаскиваем ли мы виджет, а затем, если мы это сделали, проверьте, перетаскиваем ли мы виджет на один из других сетевых устройств, сравнивая положение перетаскивания со смещением всех объектов сетки. Если мы отбросили его на другие сетки, просто вызовите функцию remove_widget сетки, в которой находился элемент, и вызовите функцию add_widget сеттера, в которую он должен быть вставлен.

Я сделал большую часть этого jsFiddle, он дает некоторые ошибки, которые, вероятно, из-за того, что gridster.js все еще находится в бета-версии: http://jsfiddle.net/Ld2zc/11/