How do I drag a grid from one gridster to another

Question

How can I drag a grid from one gridster to another 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);                 
        }
    });                         
});

Answer 1

You can use the remove_widget and add_widget functions of the gridster API to add and remove widgets.

To see if a widget is dragged, you can see if the start position of the mouse has changed from when you press the mouse down on a widget, with the onmousedown event, till when you let go of the click, the onmouseup event. Compare the start and end position to see if we dragged a widget, then if we did, check if we dragged the widget on one of the other gridsters by comparing the drop position to the offset of all the gridster objects. If we dropped it on any other gridsters, just call the remove_widget function of the gridster the element was in and call the add_widget function of the gridster it should be put in.

I've done the most part in this jsFiddle, it gives some errors that are probably because of gridster.js still being in beta: http://jsfiddle.net/Ld2zc/11/