如何将一个网格从一个网格拖到另一个网格?

问题描述：

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

答

您可以使用gridster API的remove_widget和add_widget函数添加和删除小部件.

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

要查看是否拖动了窗口小部件，您可以看到鼠标的开始位置是否发生了变化，从按下带有onmousedown事件的窗口小部件上按下鼠标到放开单击， onmouseup事件.比较开始位置和结束位置，看看是否拖动了一个小部件，然后进行了比较，通过将放置位置与所有栅格对象的偏移量进行比较，检查是否在其他栅格之一上拖动了该小部件.如果我们将其放置在其他栅格程序上，只需调用元素所在栅格程序的remove_widget函数，然后调用应放入该栅格程序的add_widget函数即可.

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.

我在此jsFiddle中做了大部分工作，它给出了一些错误，可能是因为gridster.js仍处于测试阶段: http://jsfiddle.net/Ld2zc/11/

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/

如何将一个网格从一个网格拖到另一个网格?

相关推荐