如何将元素从一个栅格拖到另一个栅格? [英] How to drag an element from one gridster to another?

问题描述

有人试图将一个单元从一个Gridster拖到另一个吗?我一直在努力使它工作..但是没有运气.有什么帮助吗?

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?

推荐答案

此处是拖放到Gridster中.这只是您要求的一半，但我怀疑一个人可能会看到一个项目将其拖到栅格外并拖入另一个..

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

    }
});

});

这篇关于如何将元素从一个栅格拖到另一个栅格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！