文档章节

前端拖拽插件gridster.js

wftt
 wftt
发布于 2018/03/22 15:42
字数 630
阅读 2419
收藏 0

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

1.jquery.js(jQuery文件 )
2.jquery.gridster.js(gridster的主要脚本)
3.jquery.gridster.css(gridster的样式文件)

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

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script src="https://cdn.bootcss.com/jquery.gridster/0.5.6/jquery.gridster.js"></script>

<link href="https://cdn.bootcss.com/jquery.gridster/0.5.6/jquery.gridster.css"  rel="stylesheet">

 一、首先是html代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<script src="https://cdn.bootcss.com/jquery.gridster/0.5.6/jquery.gridster.js"></script>
	<link href="https://cdn.bootcss.com/jquery.gridster/0.5.6/jquery.gridster.css" rel="stylesheet">
</head>
<body>
	<div class="gridster">
		<ul>
			<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
                <!-- 这里写了一个header,对应配置里面的handle,鼠标落到header上面可以拖,而不是整个块 -->
                <header>|||</header>
                0
            </li>
            <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
                <header>|||</header>
                1
            </li>
            <li data-row="3" data-col="1" data-sizex="3" data-sizey="2">
                <!-- 这里写了一个header,对应配置里面的handle,鼠标落到header上面可以拖,而不是整个块 -->
                <header>|||</header>
                3
            </li>
            <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">
                <header>|||</header>
                2
            </li>
             <li data-row="3" data-col="4" data-sizex="1" data-sizey="2">
                <header>|||</header>
                4
            </li>
		</ul>
	</div>
</body>

以上代码中,

data-row:   元素所在行数   data-col:元素所在列数
data-sizex:元素块的宽(以个为单位,每个元素块的宽度为widget_base_dimensions所设定的值)
data-sizey:元素块的高(以个为单位,每个元素块的高度为widget_base_dimensions所设定的值)

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

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

<style>
		.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;}
	</style>

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

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

<script>
	var gridster;
	$(function(){
		gridster = $(".gridster ul").gridster({
			widget_base_dimensions:[100,100],        //模块宽高[宽,高]
			widget_margins:[5,5],       //模块间距[上下,左右]
			draggable:{
				handle:'header'        //拖动元素
			},
			resize:{
				enabled:true
			}
		}).data('gridster');
	})
</script>

四、效果截图:

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

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
D2Admin 基于 vue.js 的管理系统前端解决方案

基于 和 的管理系统前端解决方案 项目地址 github.com/FairyEver/d… 欢迎大家一起维护 此项目适合作为模板使用,在使用前请先检查您不需要的功能,删除相关代码和依赖插件,以减少代码体积。...

FaryEver
2018/05/26
0
0
基于AngularJS的拖拽上传

随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs)。 一、首先前端这款插件是基于AngularJS的,下面我们来看主要代码。 引入j...

雪飘七月
2015/06/23
0
0
fullCalendar日历插件,怎样获得已经在界面上加载好的事件的数据

使用fullCalendar插件编写的一个排版日历,每个事件都是从前端界面拖拽进去的,数据库里没有记录,现在想要获得这些数据。假设当前端界面有从数据库获得数据生成的时间时,在拖拽新的事件时,...

buy123
2017/03/15
113
0
通用仪表盘Dashboard的简单实践

前言 在这个大数据的时代里,数据为王,系统能实时展示各种数据显得尤为重要,所以仪表盘便成为每个系统的标配。 背景 我们都知道大部分前端框架都提供了各种丰富的仪表盘,但有几点不能满足...

邵磊
2018/07/24
0
0
飞冰:Iceworks 自定义模板支持布局定制(v2.3.0 版本)

Iceworks 2.3.0 版本发布概览 新增:自定义模板新增自定义布局功能 新增:构建资源结果展示插件 新增:阿里云 OSS 上传插件 查看详情 新增:项目插件面板可拖拽排序 优化:依赖管理插件,使用...

noyobo
2018/06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 熟悉的味道,难道这就是恋爱的感觉

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :好久没分享歌了分享张碧晨的单曲《今后我与自己流浪》 《今后我与自己流浪》- 张碧晨 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
126
7
SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
18
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部