2013年5月23日 星期四

jQuery 拖曳區塊 plugin- grister

gridster

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

參考html
  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就可以了

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

Demo
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...