jQuery拖拽插件gridster使用指南_jquery
程序员文章站
2022-05-12 09:17:51
...
gridster.js 是一个 jQuery 插件用来构建直观的可拖放的布局,支持多列布局,你还可以动态的添加和删除表格中的元素。
1.gridster插件功能
实现类似于win8 磁贴拖拽的功能
2.gridster官方地址
在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本地测试总是出现这样那样的问题,一是无法移动,二是在磁铁的附近有一个黑点,可能是定位使用的。但是如果在网站中正常使用,应该不会出现这样的黑点。gridster插件的属性和方法在官网上有详细说明。
经过测试了一下,最后终于解决了问题。效果显示如下:
3.gridster使用方法
1.首先引用js文件
2.用到的css
3.使用的js代码
$(function(){ $(".gridster ul").gridster({ widget_margins: [5, 5], widget_base_dimensions: [100, 100], draggable: { handle: '.handle' } }); var gridster = $(".gridster ul").gridster().data('gridster'); });
4.使用的html
1 2 3 4 5Like no other javascript library, Parsley has a full support for #UX concerns and detailed options. Override almost every Parsley default behaviors to fit your exact needs.
6 7 8 9 10 11 12 13 14 15
4.gridster使用说明
gridster插件在chrome与firefox中使用正常,特效显示页正常。但是在ie8一下显示正常,但是拖拽特效无法显示。
现在你可以打开来看看这个拖动效果了,Oh,买尬的!也会你会发现很不流畅,这个或许是girdster的小bug或者说不完美的地方,如何改进,明天再讲!
推荐阅读
-
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
-
jQuery日程管理插件fullcalendar使用详解
-
基于jQuery实现一个marquee无缝滚动的插件
-
基于HTML5 audio元素播放声音jQuery小插件
-
jQuery.Validate表单验证插件的使用示例详解
-
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
-
Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件
-
jquery表单验证使用插件formValidator
-
jquery ui sortable拖拽后保存位置
-
jQuery插件实现非常实用的tab栏切换功能【案例】