jQuery 拖曳區塊 plugin- grister

逛到一個很有趣的plugin，如果要做磚塊可以拖曳並重新編排的效果，可以參考看看。
plugin 網址
gridster.js

參考html

view plaincopy to clipboardprint

1. <div class="gridster">  
2. <ul>  
3. <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>  
4. <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>  
5. <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>  
6.     
7. <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>  
8. <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>  
9.     
10. <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>  
11. <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>  
12. <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>  
13.     
14. <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>  
15. <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>  
16.     
17. <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>  
18. <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>  
19. </ul>  
20. </div>  

再使用plugin就可以了

view plaincopy to clipboardprint

1. $(".gridster ul").gridster({   
2.     widget_margins: [10, 10],   
3.     widget_base_dimensions: [140, 140]   
4. });  

Demo