jQuery插件：超酷的多列网格式拖放插件gridster.js

日期：2012-8-15  来源：GBin1.com

在线演示  本地下载

以往的文章中，我们分享了很多jQuery相关拖放插件，今天我们这里再推荐的一个超酷的jQuery拖放插件-gridster.js绝对会让你眼前一亮，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的html元素转换为网格组件。 

主要特性

• 只依赖jQuery
• 支持元素的添加和删除
• 文档比较全
• 拥有测试用例，你可以查看你的浏览器的测试结果
• 比较适合开发益智游戏 

如何使用

引入类库，包括jQuery和gridster.js：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/jquery.gridster.min.js"></script> 

然后导入gridstrer的css文件：

<link rel="stylesheet" type="text/css" href="css/jquery.gridster.min.css">

HTML内容如下：

<div class="gridster">
            <ul>
                <li class="s1" data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
                <li class="s1" data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
                <li class="s1" data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

                <li class="s2" data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
                <li class="s4" data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

                <li class="s1" data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
                <li class="s2" data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
                <li class="s1" data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

                <li class="s1" data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
                <li class="s1" data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

                <li class="s1" data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
                <li class="s3" data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
            </ul>
        </div>

注意gridster.js使用HTML5的data属性来定义相关的拖放元素属性，data-row为行号，data-col为列号，data-sizex为X轴元素宽度，datasizey为Y轴元素宽度。 

最后调用插件js，代码如下：

.......

.......

来源：jQuery插件：超酷的多列网格式拖放插件gridster.js