2015-05-15 10:12:23 -04:00
<!doctype html>
< html >
< head >
< title > Demo » sticky position widgets » gridster.js< / title >
< link rel = "stylesheet" type = "text/css" href = "assets/css/demo.css" >
< link rel = "stylesheet" type = "text/css" href = "../dist/jquery.gridster.min.css" >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" > < / script >
2015-05-18 02:37:53 -06:00
< script src = "../dist/jquery.gridster.min.js" type = "text/javascript" charset = "utf-8" > < / script >
2015-05-15 10:12:23 -04:00
< / head >
< body >
< h1 > Sticky position widgets< / h1 >
< p > Widgets can be moved to an exact postion on the grid and the grid will not attempt to collapse it down to a smaller size. Also widgets will not move out of the way automatically, but will move only on mouse up< / p >
< div class = "gridster" >
< ul >
< li data-row = "1" data-col = "1" data-sizex = "1" data-sizey = "1" > 0< / li >
< li data-row = "1" data-col = "2" data-sizex = "1" data-sizey = "1" > 1< / li >
< li data-row = "1" data-col = "3" data-sizex = "1" data-sizey = "1" > 2< / li >
< li data-row = "1" data-col = "4" data-sizex = "1" data-sizey = "1" > 3< / li >
< li data-row = "2" data-col = "1" data-sizex = "1" data-sizey = "1" > 4< / li >
< li data-row = "2" data-col = "2" data-sizex = "1" data-sizey = "1" > 5< / li >
< li data-row = "2" data-col = "3" data-sizex = "1" data-sizey = "1" > 6< / li >
< li data-row = "2" data-col = "4" data-sizex = "1" data-sizey = "1" > 7< / li >
< li data-row = "3" data-col = "1" data-sizex = "1" data-sizey = "1" > 8< / li >
< li data-row = "3" data-col = "2" data-sizex = "1" data-sizey = "1" > 9< / li >
< li data-row = "3" data-col = "3" data-sizex = "1" data-sizey = "1" > 10< / li >
< li data-row = "3" data-col = "4" data-sizex = "1" data-sizey = "1" > 11< / li >
< / ul >
< / div >
< script type = "text/javascript" >
var gridster;
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
shift_widgets_up: false,
shift_larger_widgets_down: false,
collision: {
wait_for_mouseup: true
}
}).data('gridster');
< / script >
< / body >
< / html >
