如何将元素从一个网格拖到另一个网格？ [关闭]答案

【问题标题】：How to drag an element from one gridster to another? [closed]如何将元素从一个网格拖到另一个网格？ [关闭]
【发布时间】：2013-06-20 16:46:29
【问题描述】：

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

【问题讨论】：

我也想这样做。如果我找到解决方案，我会发布。
我遇到的一件事是，如果我将每个
标记为可拖动并将 gridster 设置为可放置，它只会向它们添加 jquery-ui 类。但它不包括这种行为。我认为我们需要实际修改 gridster.js 以在项目移出时表现不同。

【解决方案1】：

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

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

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

    }
});

});

【讨论】：