如何将一个网格从一个网格拖到另一个网格? [英] How do I drag a grid from one gridster to another gridster?
问题描述
如何将一个网格从一个网格拖到另一个网格?
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/
这篇关于如何将一个网格从一个网格拖到另一个网格?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!