在线演示 本地下载
以往的文章中,我们分享了很多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轴元素宽度。
........
........
来源:jQuery插件:超酷的多列网格式拖放插件gridster.js
分享到:
相关推荐
在本资源中,我们关注的是"gridster.js",这是一个基于jQuery的插件,用于创建可拖动的网格布局。这个插件使得开发者能够轻松实现自定义的网格系统,用户可以通过拖放操作自由调整各个单元格的大小和位置,适用于...
1. **多列网格布局**:Gridster.js 支持创建多个列的网格系统,每个单元格可以有不同的大小,以适应各种尺寸和形状的内容。 2. **拖放功能**:用户可以直接通过鼠标拖动来改变元素的位置,同时元素会自动调整大小以...
3. **多列网格**:Gridster.js 支持多列布局,可以根据需要设置不同的列数,以适应各种设计需求。 4. **碰撞检测**:在拖放过程中,Gridster.js 能够检测到其他元素并做出相应调整,防止元素重叠。 5. **嵌套网格**...
网页中拖动 DIV 是很常见的操作,今天就分享给大家一个 jQuery 多列网格拖动布局插件,和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小,并且支持多列的网格布局,它们会自动的根据位置自己排序和调整...
4. **API接口**:Gridster.js提供了丰富的API,开发者可以利用这些接口实现对网格元素的添加、删除、大小调整和位置改变等功能,从而进一步扩展插件的功能。 5. **事件处理**:插件内置了各种事件,如`grid_resized...
jQuery Gridster就是这样一款强大的插件,它允许开发者创建拖放多列的网格布局,为网页增添动态和灵活性。 jQuery Gridster的核心特性在于其强大的拖放功能。这个插件基于jQuery库,使得在各种浏览器上实现跨平台...
- **网格系统**:Gridster 使用灵活的网格系统,开发者可以自定义网格的列数和行数,以满足各种设计需求。 - **事件监听**:Gridster 提供了一系列的事件回调,如`on_start_move`、`on_stop_move`等,开发者可以利用...
dad.js 是一个简单易用的 jQuery 拖放插件,无需 jQuery UI 库支持,兼容 Bootstrap 表格布局。 标签:dadjs
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织...JQuery插件orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js orgchart.js ...
**jQuery UI 拖拽拖放插件:jquery.top-droppable** 在Web开发中,交互性和用户体验至关重要,而拖放功能(Drag and Drop)是提升用户体验的一种有效方式。jQuery UI是一个强大的JavaScript库,提供了丰富的用户...
DDSort是一款基于jQuery的轻量级插件,专为实现元素的拖放排序功能而设计。这个插件的出现使得开发者无需深入理解复杂的JavaScript或HTML5的拖放API,就能轻松地在网页上添加交互式的排序功能。在给定的压缩包文件中...
jQuery.ipicture.js 是一款强大的JavaScript插件,它允许开发者在网页中的地图上创建标记,并且可以结合图文及链接进行丰富的信息展示。这款插件特别适合用于地理信息系统(GIS)应用,或者任何需要在地图上标注特定...
在CSS3之前,创建圆角效果通常需要复杂的图片切片或使用JavaScript,而jQuery的圆角插件如`jquery.corners.js`则简化了这一过程。 `jquery.corners.js`是一个小巧而实用的jQuery插件,它通过动态添加CSS样式来实现...
《win10拖拽布局插件jquery.gridster.js详解及应用》 在现代网页开发中,用户界面的设计和交互体验愈发重要。为了实现类似于Windows 10系统中的自由拖拽布局,开发者们常常会借助于专门的插件来达成这一目标。其中...
**jQuery 插件:Ajax 和 Iframe 加载提示效果** 在网页开发中,用户体验是至关重要的,尤其是在进行异步操作(如Ajax请求)或加载Iframe时,用户往往需要一个明确的反馈,告知他们系统正在进行后台处理。这个jQuery...
4. **嵌套网格**:Gridster.js还支持子网格,使得布局更加复杂和多层次。 5. **事件监听**:提供了丰富的事件接口,如`drag_start`、`drag_stop`等,方便开发者扩展功能或进行状态记录。 在项目中,`jiaoben6868`...
jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery插件版 treeview1.0jsontree (jquery.treeview.js) jQuery...
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
本文将深入探讨一个基于jQuery的插件,该插件实现了可拖动的图片展示功能,为用户提供了一种超酷的互动体验。 首先,我们需要理解jQuery的核心概念。jQuery提供了一种简洁的API,使得开发者可以方便地操作DOM...