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');

})

四、效果截图：

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

html拖拽吸附插件,前端拖拽插件gridster.js相关推荐

html5e插件,前端vscode必备插件，给你更好的编程体验！
工欲善其事,必先利其器.在这里,我会给你推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就会知道它有多好用. 走马观花前,请先将你的 vscode 更新到最新版本. 通用插件 HTM ...
html5鼠标下拉浮窗固定,【前端技术】vue-floating-menu可拖拽吸附的浮窗菜单
前言正如这个名字,这是一个具有拖拽吸附功能的浮窗菜单,开源项目一个基于 vue 的浮窗组件,可在屏幕内自由拖拽,拖拽后可以根据最后的位置吸附到页面两边,而且可以点击浮窗显示菜单效果如下: 遇到的 ...
jquery 磁铁模式控件_利用JQuery拖拽插件实现拖拽效果
asp教程x.cs" inherits="jquerydrag._default" %> $(document).ready(function() { //拖拽方法 ...
html5 div拖拽插件,div拖拽插件——JQ.MoveBox.js(自制JQ插件)
有一段时间没更新博客了,都不知道忙些什么,学习也没什么进展,惭愧. 这一周空闲的时间学着自己写一下JQ插件. 以前用原生的JS做过类似拖拽div的效果,现在按原思路改做成一个JQ的小插件,当作制作JQ ...
html5图片拖拽删除,基于jquery插件实现拖拽删除图片功能
本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码,供大家参考,具体内容如下实现以下效果完全拖出这个层,图片会消失,否则图片会回到原来的位置 #mydiv{ width:900px ...
拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素
介绍 HTML5 提供了专门的拖拽与拖放的 API,目前各浏览器都已支持,包括 IE.HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能.例如,用户可使用鼠标选择可拖 ...
设置拖拽事件，获取拖拽内容
设置dragEnter 设置DragDrop using System; using System.Collections.Generic; using System.ComponentModel; ...
前端开发需要了解的JS插件
excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...
【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...

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

html拖拽吸附插件,前端拖拽插件gridster.js相关推荐

最新文章

热门文章