如何将网格从一个栅栏拖动到另一个栅格？
$(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函数来添加和删除小部件.
要查看是否拖动小部件,您可以看到鼠标的起始位置是否已从鼠标在小部件上按下鼠标的时间以及onmousedown事件发生变化,直到放开点击onmouseup事件为止.比较开始和结束位置,看看我们是否拖动了一个小部件,然后如果我们这样做,检查我们是否通过将放置位置与所有栅格对象的偏移进行比较来拖动其他栅格之一.如果我们将其放在任何其他栅格上,只需调用元素所在的栅格的remove_widget函数,并调用应该放入的栅格的add_widget函数.
我在这个jsFiddle中做了大部分工作,它给出了一些错误,这可能是因为gridster.js仍然在beta：http://jsfiddle.net/Ld2zc/11/
