前端拖拽插件gridster.js介绍与使用示例
2017-08-17 10:44
645 查看
原网站：http://gridster.net（此域名已过期）
gridster.js后续的更新：https://github.com/dsmorse/gridster.js
issues: https://github.com/ducksboard/gridster.js/issues
转载：前端拖拽插件gridster.js中文文档 2014-8-6 10:11
gridster.js是一款基于jQuery的前端拖拽插件，效果相当的不错，大家可以先看看Demo(http://gridster.NET/#intro)（蓝色部分的白块就是了，可以随便拖动，娱乐性很强）。
一、更多示例
gridster.js允许使用者做一些自定义配置（第二节会讲到），通过配置可能实现不同的效果和功能，并且可以做一些限制。以下的示例可能在知道如何 使用后才能更好理解，所以放在前面只做一个索引，有的功能不理解也没关系，gridster只是让大家知道它可以实现大概以下功能。
（1）动态添加模块（http://gridster.net/demos/adding-widgets-dynamically.html ）：使用add_widget方法，通过数组创建一个gridster实例，产生的模块自动排列，无需指定相对位置。
（2）自定义模块内鼠标的拖动区域（http://gridster.net/demos/custom-drag-handle ）：鼠标点住模块内指定的元素才可以开始拖动，这样做以免影响模块内其他鼠标动作，比如超链接。
（3）放大悬停模块（http://gridster.net/demos/expandable-widgets.html）：通过resize_widget方法改变鼠标悬停模块的大小
（4）通过JSON序列创建gridster实例（http://gridster.net/demos/grid-from- serialize.html ）：通过JSON序列生成一个gridster实例（有了这个方法我们就可以方便的从数据库读取用户的模块位置定义等等）
（5）同一页面放多个拖拽实例（http://gridster.net/demos/multiple-grids.html ）：通过配置参数namespace在同一个页面配置多个gridster实例
（6）改变模块大小（http://gridster.net/demos/resize.html ）：可以通过拖动改变模块的大小
（7）改变模块大小时添加不同限制（http://gridster.net/demos/resize-limits.html ）：你可以使用 resize.max_size和resize.min_size配置，以及在模块html当中添加data属性data-max-sizex、 data-max-sizey、data-min-sizex、data-min-sizey来限制拖动时模块大小的最大最小值。
（8）输出当前所有模块的位置排布（序列化）（http://gridster.net/demos/serialize.html ）：通过serialize方法获取模块的位置信息，可以当作JSON对象使用（这样就可以方便的存储数据）
（9）拖动的回调函数（http://gridster.net/demos/using-drag-callbacks.html ）：在开始拖动、拖动结束或位置已改变都可以通过回调函数调用相关的动作，实现一些需要的方法。
（10）改变模块大小后的回调函数（http://gridster.net/demos/using-resize-callbacks.html ）：同上，改变模块大小时的回调函数，分为开始、改变、结束三个事件。
（11）动态改变gridster实例的宽度（http://gridster.net/demos/dynamic-grid-width.html ）：gridster的列数可以自行定义，这样你可以把模块使劲的~~~往右边拖，直到你设定的最大值。
二、如何使用？
使用gridster.js要求引用三个必须的文件：
1.jquery.js(jQuery文件，gridster官方不提供下载，不多说了->
http://www.jquery.com )
2.jquery.gridster.js(gridster的主要脚本)
3.jquery.gridster.css(gridster的样式文件)
后面gridster.js官网提供了下载（http://gridster.net/#download ），另外你也可以直接下载最后面的官方示例包 gridster.js.zip（https://github.com/ducksboard/gridster.js/zipball /master，但是请注意，官方示例包里面没有jquery，你需要自己放进去，不知道他们故意的还是bug）
下载完了我们就开始用了：
首先html文件：
HTML代码
1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>gridster实例</title>
6. <!-- 调用jquery，注意你放置的目录不要搞错了哦！ -->
7. <script src="./js/jquery-1.11.1.min.js" type="text/JavaScript"></script>
8. <!-- 调用gridster.js和css，注意你放置的目录不要搞错了哦！ -->
9. <script src="./js/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
10. <link rel="stylesheet" type="text/css" href="./js/jquery.gridster.css">
11. <script>
12. //通过javascript脚本来配置拖动实例，随后我们会讲每个配置参数的意义
13.
14. //首先定义一个变量gridster，为了以后调用gridster的方法
15. var gridster;
16.
17. $(function(){
18.
19. gridster = $(".gridster ul").gridster({ //通过jquery选择DOM实现gridster
20. widget_base_dimensions: [100, 120], //模块的宽高 [宽,高]
21. widget_margins: [5, 5], //模块的间距 [上下,左右]
22. draggable: {
23. handle: 'header' //模块内定义拖动的元素<header>，这里也支持jquery选择器，如"span.drag_handle"
24. }
25. }).data('gridster');
26.
27. });
28.
29. </script>
30. <!-- 当然，除了调用gridster.js和css，你也要为你的html写一些自己的style -->
31. <style>
32. .gridster ul{margin:0;}
33. .gridster ul li{list-style-type:none;border:1px solid #e0e0e0;}
34. .gridster ul li header{background: none repeat scroll 0% 0% #999;display: block;font-size: 20px;line-height: normal;padding: 4px 0px 6px;margin-bottom: 20px;cursor: move;text-align:center;}
35. </style>
36. </head>
37. <body>
38. <div class="gridster">
39. <ul>
40. <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
41. <!-- 这里写了一个header，对应配置里面的handle，鼠标落到header上面可以拖，而不是整个块 -->
42. <header>|||</header>
43. 0
44. </li>
45. <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
46. <header>|||</header>
47. 1
48. </li>
49. <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
50. <header>|||</header>
51. 2
52. </li>
53. <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">
54. <header>|||</header>
55. 3
56. </li>
57.
58. <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
59. <header>|||</header>
60. 4
61. </li>
62. <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
63. <header>|||</header>
64. 5
65. </li>
66. <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
67. <header>|||</header>
68. 6
69. </li>
70. <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
71. <header>|||</header>
72. 7
73. </li>
74. <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">
75. <header>|||</header>
76. 8
77. </li>
78.
79. <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">
80. <header>|||</header>
81. 9
82. </li>
83. </ul>
84. </div>
85. </body>
86. </html>
OK,保存。大功告成！（注意：引用的三个文件不能少哦~）
从第17行“$(function(){”开始，即是gridster的配置脚本，例如“widget_base_dimensions:
[100, 120]”，“widget_margins: [5, 5]”这些都是配置参数。
现在你可以打开来看看这个拖动效果了，Oh，买尬的！也会你会发现很不流畅，这个或许是girdster的小bug或者说不完美的地方，如何改进，明天再讲！
gridster.js后续的更新：https://github.com/dsmorse/gridster.js
issues: https://github.com/ducksboard/gridster.js/issues
转载：前端拖拽插件gridster.js中文文档 2014-8-6 10:11
gridster.js是一款基于jQuery的前端拖拽插件，效果相当的不错，大家可以先看看Demo(http://gridster.NET/#intro)（蓝色部分的白块就是了，可以随便拖动，娱乐性很强）。
一、更多示例
gridster.js允许使用者做一些自定义配置（第二节会讲到），通过配置可能实现不同的效果和功能，并且可以做一些限制。以下的示例可能在知道如何 使用后才能更好理解，所以放在前面只做一个索引，有的功能不理解也没关系，gridster只是让大家知道它可以实现大概以下功能。
（1）动态添加模块（http://gridster.net/demos/adding-widgets-dynamically.html ）：使用add_widget方法，通过数组创建一个gridster实例，产生的模块自动排列，无需指定相对位置。
（2）自定义模块内鼠标的拖动区域（http://gridster.net/demos/custom-drag-handle ）：鼠标点住模块内指定的元素才可以开始拖动，这样做以免影响模块内其他鼠标动作，比如超链接。
（3）放大悬停模块（http://gridster.net/demos/expandable-widgets.html）：通过resize_widget方法改变鼠标悬停模块的大小
（4）通过JSON序列创建gridster实例（http://gridster.net/demos/grid-from- serialize.html ）：通过JSON序列生成一个gridster实例（有了这个方法我们就可以方便的从数据库读取用户的模块位置定义等等）
（5）同一页面放多个拖拽实例（http://gridster.net/demos/multiple-grids.html ）：通过配置参数namespace在同一个页面配置多个gridster实例
（6）改变模块大小（http://gridster.net/demos/resize.html ）：可以通过拖动改变模块的大小
（7）改变模块大小时添加不同限制（http://gridster.net/demos/resize-limits.html ）：你可以使用 resize.max_size和resize.min_size配置，以及在模块html当中添加data属性data-max-sizex、 data-max-sizey、data-min-sizex、data-min-sizey来限制拖动时模块大小的最大最小值。
（8）输出当前所有模块的位置排布（序列化）（http://gridster.net/demos/serialize.html ）：通过serialize方法获取模块的位置信息，可以当作JSON对象使用（这样就可以方便的存储数据）
（9）拖动的回调函数（http://gridster.net/demos/using-drag-callbacks.html ）：在开始拖动、拖动结束或位置已改变都可以通过回调函数调用相关的动作，实现一些需要的方法。
（10）改变模块大小后的回调函数（http://gridster.net/demos/using-resize-callbacks.html ）：同上，改变模块大小时的回调函数，分为开始、改变、结束三个事件。
（11）动态改变gridster实例的宽度（http://gridster.net/demos/dynamic-grid-width.html ）：gridster的列数可以自行定义，这样你可以把模块使劲的~~~往右边拖，直到你设定的最大值。
二、如何使用？
使用gridster.js要求引用三个必须的文件：
1.jquery.js(jQuery文件，gridster官方不提供下载，不多说了->
http://www.jquery.com )
2.jquery.gridster.js(gridster的主要脚本)
3.jquery.gridster.css(gridster的样式文件)
后面gridster.js官网提供了下载（http://gridster.net/#download ），另外你也可以直接下载最后面的官方示例包 gridster.js.zip（https://github.com/ducksboard/gridster.js/zipball /master，但是请注意，官方示例包里面没有jquery，你需要自己放进去，不知道他们故意的还是bug）
下载完了我们就开始用了：
首先html文件：
HTML代码
1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>gridster实例</title>
6. <!-- 调用jquery，注意你放置的目录不要搞错了哦！ -->
7. <script src="./js/jquery-1.11.1.min.js" type="text/JavaScript"></script>
8. <!-- 调用gridster.js和css，注意你放置的目录不要搞错了哦！ -->
9. <script src="./js/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
10. <link rel="stylesheet" type="text/css" href="./js/jquery.gridster.css">
11. <script>
12. //通过javascript脚本来配置拖动实例，随后我们会讲每个配置参数的意义
13.
14. //首先定义一个变量gridster，为了以后调用gridster的方法
15. var gridster;
16.
17. $(function(){
18.
19. gridster = $(".gridster ul").gridster({ //通过jquery选择DOM实现gridster
20. widget_base_dimensions: [100, 120], //模块的宽高 [宽,高]
21. widget_margins: [5, 5], //模块的间距 [上下,左右]
22. draggable: {
23. handle: 'header' //模块内定义拖动的元素<header>，这里也支持jquery选择器，如"span.drag_handle"
24. }
25. }).data('gridster');
26.
27. });
28.
29. </script>
30. <!-- 当然，除了调用gridster.js和css，你也要为你的html写一些自己的style -->
31. <style>
32. .gridster ul{margin:0;}
33. .gridster ul li{list-style-type:none;border:1px solid #e0e0e0;}
34. .gridster ul li header{background: none repeat scroll 0% 0% #999;display: block;font-size: 20px;line-height: normal;padding: 4px 0px 6px;margin-bottom: 20px;cursor: move;text-align:center;}
35. </style>
36. </head>
37. <body>
38. <div class="gridster">
39. <ul>
40. <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
41. <!-- 这里写了一个header，对应配置里面的handle，鼠标落到header上面可以拖，而不是整个块 -->
42. <header>|||</header>
43. 0
44. </li>
45. <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
46. <header>|||</header>
47. 1
48. </li>
49. <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">
50. <header>|||</header>
51. 2
52. </li>
53. <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">
54. <header>|||</header>
55. 3
56. </li>
57.
58. <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
59. <header>|||</header>
60. 4
61. </li>
62. <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
63. <header>|||</header>
64. 5
65. </li>
66. <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
67. <header>|||</header>
68. 6
69. </li>
70. <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">
71. <header>|||</header>
72. 7
73. </li>
74. <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">
75. <header>|||</header>
76. 8
77. </li>
78.
79. <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">
80. <header>|||</header>
81. 9
82. </li>
83. </ul>
84. </div>
85. </body>
86. </html>
OK,保存。大功告成！（注意：引用的三个文件不能少哦~）
从第17行“$(function(){”开始，即是gridster的配置脚本，例如“widget_base_dimensions:
[100, 120]”，“widget_margins: [5, 5]”这些都是配置参数。
现在你可以打开来看看这个拖动效果了，Oh，买尬的！也会你会发现很不流畅，这个或许是girdster的小bug或者说不完美的地方，如何改进，明天再讲！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端拖拽插件gridster.js介绍与使用示例
- 前端拖拽插件gridster.js介绍与使用示例
- 前端拖拽插件gridster.js
- 前端拖拽插件gridster.js
- 前端单元测试插件qunit.js使用示例
- jQuery图片切换插件jquery.cycle.js使用示例
- 颜色动画插件jquery.color.js的使用示例
- maven的scm插件介绍及使用示例
- JS中prototype关键字的功能介绍及使用示例
- 提示框插件jBox.js的使用示例
- 手机端滑动、长按事件插件touchswipe.js的使用示例
- jQuery拖拽插件gridster使用指南
- 省市区选择插件jquery.cityselect.js的使用示例
- 美化滚动条插件mCustomScrollbar.js的使用示例
- 上传插件webuploader.js的使用示例
- js编码、解码函数介绍及其使用示例
- AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
- 自动补全插件autocomplete.js的使用示例
- js编码、解码函数介绍及其使用示例
- jquery.fileupload.js插件使用--前两篇日志中两个类的使用示例