html拖拽吸附插件,前端拖拽插件gridster.js

使用gridster.js必须引用三个文件：

1.jquery.js(jQuery文件 )

2.jquery.gridster.js(gridster的主要脚本)

3.jquery.gridster.css(gridster的样式文件)

可以去官网下载，也可以直接引用cdn.

一、首先是html代码：

• |||

  0

• |||

  1

• |||

  3

• |||

  2

• |||

  4

以上代码中，

data-row:元素所在行数　　　data-col：元素所在列数

data-sizex:元素块的宽(以个为单位，每个元素块的宽度为widget_base_dimensions所设定的值)

data-sizey:元素块的高(以个为单位，每个元素块的高度为widget_base_dimensions所设定的值)

data-row和data-col是在设置元素块的位置的，而data-sizex和data-sizey是设置元素块大小的。

二、ｃｓｓ样式:除了引用的css外，还可以自己进行设置样式,如下：

.gridster ul{margin:0;}

.gridster ul li{list-style-type:none;border:1px solid #e0e0e0;text-align: center;}

.gridster ul li header{background:#999;display: block;font-size: 20px;line-height: normal;padding: 4px 0px 6px;margin-bottom: 20px;cursor: move;text-align:center;}

三、脚本ｊｓ:这一部分主要是对gridster的参数进行配置，达到自己想要的效果。

如果只是实现拖拽功能，不需要resize设置，resize主要是调整大小的。

var gridster;

$(function(){

gridster = $(".gridster ul").gridster({

widget_base_dimensions:[100,100], //模块宽高[宽，高]

widget_margins:[5,5],　　　　　　　//模块间距[上下，左右]

draggable:{

handle:'header' //拖动元素

},

resize:{

enabled:true

}

}).data('gridster');

})

四、效果截图：

第一张图是最开始的状态，第二张图是拖拽后的状态。鼠标移入，可以看到右下角有个小角标可以进行调整大小。