44 < meta charset ="utf-8 ">
55 < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
66 < meta name ="viewport " content ="width=device-width, initial-scale=1 ">
7- < title > Two grids demo</ title >
7+ < title > Two grids JQ demo</ title >
88
99 < link rel ="stylesheet " href ="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">
1010 < link rel ="stylesheet " href ="demo.css "/>
4545</ head >
4646< body >
4747 < div class ="container-fluid ">
48- < h1 > Two grids demo</ h1 >
48+ < h1 > Two grids demo (Jquery version) </ h1 >
4949
5050 < div class ="row ">
5151 < div class ="col-md-3 ">
5252 < div class ="sidebar ">
53-
5453 <!-- will size to match content -->
5554 < div class ="grid-stack-item ">
5655 < div class ="grid-stack-item-content "> Drag me</ div >
5756 </ div >
5857 <!-- manually force a drop size of 2x1 -->
59- < div class ="grid-stack-item " gs-w ="2 " gs-h ="1 ">
60- < div class ="grid-stack-item-content "> Drag me 2x1</ div >
58+ < div class ="grid-stack-item " gs-w ="2 " gs-h ="1 " gs-max-w =" 3 " >
59+ < div class ="grid-stack-item-content "> 2x1, max=3 </ div >
6160 </ div >
62-
6361 </ div >
6462 </ div >
6563 < div class ="col-md-9 ">
@@ -83,19 +81,21 @@ <h1>Two grids demo</h1>
8381 </ div >
8482 < script src ="events.js "> </ script >
8583 < script type ="text/javascript ">
84+ let grids ;
85+ $ ( function ( ) { // testing $ works (delay loading here)
8686 let options = {
8787 column : 6 ,
8888 minRow : 1 , // don't collapse when empty
8989 cellHeight : 70 ,
9090 disableOneColumnMode : true ,
9191 float : false ,
92- dragIn : '.sidebar .grid-stack-item' , // class that can be dragged from outside
92+ dragIn : '.sidebar .grid-stack-item' , // add draggable to class
9393 dragInOptions : { revert : 'invalid' , scroll : false , appendTo : 'body' , helper : 'clone' } , // clone
9494 removable : '.trash' , // drag-out delete class
9595 removeTimeout : 100 ,
9696 acceptWidgets : function ( el ) { return true ; } // function example, else can be simple: true | false | '.someClass' value
9797 } ;
98- let grids = GridStack . initAll ( options ) ;
98+ grids = GridStack . initAll ( options ) ;
9999 grids [ 1 ] . float ( true ) ;
100100
101101 let items = [
@@ -110,15 +110,15 @@ <h1>Two grids demo</h1>
110110 addEvents ( grid , i ) ;
111111 grid . load ( items ) ;
112112 } ) ;
113+ } ) ;
114+ function toggleFloat ( button , i ) {
115+ grids [ i ] . float ( ! grids [ i ] . getFloat ( ) ) ;
116+ button . innerHTML = 'float: ' + grids [ i ] . getFloat ( ) ;
117+ }
113118
114- function toggleFloat ( button , i ) {
115- grids [ i ] . float ( ! grids [ i ] . getFloat ( ) ) ;
116- button . innerHTML = 'float: ' + grids [ i ] . getFloat ( ) ;
117- }
118-
119- function compact ( i ) {
120- grids [ i ] . compact ( ) ;
121- }
119+ function compact ( i ) {
120+ grids [ i ] . compact ( ) ;
121+ }
122122 </ script >
123123</ body >
124124</ html >
0 commit comments