How to drag an element from one gridster to another? [closed]

Question

Has anybody tried to drag a cell from one Gridster to another? I have been trying to get that working.. but with no luck. Any help please?

Win

I'm also looking to do this. If I find a solution, I will post. – Murrah

one of the things that i came across is that if I mark each <li> a draggable and set the gridster as droppable, it only adds the jquery-ui classes to them. but it does not cover that behaviour. I think we need to actually modify gridster.js to behave differently when an item moves out of it. – Win

Does anybody has a better solution? – Mikimikihisa

Answer 1

Here is an example of drag / drop into a gridster. It is only half of what you are asking for but I suspect one could watch an item for dragging outside of its gridster and into another..

Here is an example of moving items from one grid to another via a double click. It's a start.

$(function () { //DOM Ready

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

var gridster = $(".gridster ul").gridster().data('gridster');
var gridster2 = $(".gridster2 ul").gridster().data('gridster');

$("#dragFrom").draggable();

$(".gridster ").droppable({
    drop: function (event, ui) {

        $("#dragFrom").attr("style", 'position: relative;');
        var widget = gridster.add_widget('<li><h5>Ukulele Boat</h5><img height=100 width=100 src="http://i.imgur.com/XjNt15P.jpg" alt="Uke Boat" ></li>', 1, 1);
        widget.dblclick(function (widget) {
            widget = gridster.remove_widget(this);
            var gridster2 = $(".gridster2 ul").gridster().data('gridster');
            widget = gridster2.add_widget('<li id="draggable2"><h5>Ukulele Boat</h5><img height=100 width=100 src="http://i.imgur.com/XjNt15P.jpg" alt="Uke Boat" ></li>', 1, 1);
            widget.dblclick(function (widget) {
                gridster2.remove_widget(this);
            });
        });
    }
});

$(".gridster2 ").droppable({
    drop: function (event, ui) {

        var widget = gridster2.add_widget('<li id="draggable2"><h5>Electric Goldfish</h5><img height=100 width=100 src=http://i.imgur.com/OYfuMLF.jpg" alt="Electric Goldfish"  ></li>', 1, 1);
        widget.dblclick(function (widget) {
            widget = gridster2.remove_widget(this);
            var gridster = $(".gridster ul").gridster().data('gridster');
            widget = gridster.add_widget('<li id="draggable2"><h5>Electric Goldfish</h5><img height=100 width=100 src=http://i.imgur.com/OYfuMLF.jpg" alt="Electric Goldfish" ></li>', 1, 1);
            widget.dblclick(function (widget) {
                gridster.remove_widget(this);
            });
        });
        $("#dragFrom").attr("style", 'position: relative;');

    }
});

});

Savanna