使用gridster.js必须引用三个文件：

1.jquery.js(jQuery文件 )

2.jquery.gridster.js(gridster的主要脚本) 3.jquery.gridster.css(gridster的样式文件)

可以去官网下载，也可以直接引用cdn.

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery.gridster/0.5.6/jquery.gridster.js"></script>

<link href="https://cdn.bootcss.com/jquery.gridster/0.5.6/jquery.gridster.css"  rel="stylesheet">

 一、首先是html代码：

	
    				
    	
    
		
     
			
      
                
                       
       
        |||
       
                0            
            
      
                
       
        |||
       
                1            
            
      
                
                       
       
        |||
       
                3            
            
      
                
       
        |||
       
                2            
             
      
                
       
        |||
       
                4            
		
     
	
    

以上代码中，

data-row:   元素所在行数　　　data-col：元素所在列数

data-sizex:元素块的宽（以个为单位，每个元素块的宽度为widget_base_dimensions所设定的值）data-sizey:元素块的高（以个为单位，每个元素块的高度为widget_base_dimensions所设定的值）

data-row和data-col是在设置元素块的位置的，而data-sizex和data-sizey是设置元素块大小的。

二、ｃｓｓ样式:除了引用的css外，还可以自己进行设置样式,如下：

三、脚本ｊｓ:这一部分主要是对gridster的参数进行配置，达到自己想要的效果。

如果只是实现拖拽功能，不需要resize设置，resize主要是调整大小的。

四、效果截图：

第一张图是最开始的状态，第二张图是拖拽后的状态。鼠标移入，可以看到右下角有个小角标可以进行调整大小。