jquery - 如何将元素从一个网格拖到另一个网格？

Question

有没有人试图将一个单元格从一个 Gridster 拖到另一个？我一直在努力让它工作..但没有运气。请问有什么帮助吗？

Answer 1

这是拖放到网格中的示例。这只是您要求的一半，但我怀疑有人可以看到一个项目拖到其网格之外并拖入另一个..

这是通过双击将项目从一个网格移动到另一个网格的示例。这是一个开始。

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

    }
});

});