前端拖拽插件gridster.js介绍与使用示例

最新推荐文章于 2024-09-15 07:48:25 发布

xiangm23

最新推荐文章于 2024-09-15 07:48:25 发布

阅读量2.5w

点赞数 1

分类专栏： JavaScript 文章标签： gridster.js

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

原网站：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.

7. <script src="./js/jquery-1.11.1.min.js" type="text/javascript"></script>

8.

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.

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.

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或者说不完美的地方，如何改进，明天再讲！