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

转载：前端拖拽插件gridster.js中文文档2014-8-610: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.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

30.

31.

36.

37.

38.

39.

40.

41.

42.

|||

43.0

44.

45.

46.

|||

47.1

48.

49.

50.

|||

51.2

52.

53.

54.

|||

55.3

56.

57.

58.

59.

|||

60.4

61.

62.

63.

|||

64.5

65.

66.

67.

|||

68.6

69.

70.

71.

|||

72.7

73.

74.

75.

|||

76.8

77.

78.

79.

80.

|||

81.9

82.

83.

84.