可拖动布局之Gridster
看过bootstrap可视化布局系统的人是不是都会对页面元素的拖拽有着很大的兴趣？下面呢，楼主就给大家讲两个楼主知道的拖拽小插件吧。
一、gridster
1.了解gridster
后续官网：http://dsmorse.github.io/gridster.js/
gridster.js后续的更新：https://github.com/dsmorse/gridster.js
issues: https://github.com/ducksboard/gridster.js/issues
2.官网示例
①动态添加模块(http://dsmorse.github.io/gridster.js/demos/adding-widgets-dynamically.html)：使用add_widget方法，通过数组创建gridster实例。产生的模块自动排列，无需指定相对位置。
②自定义拖拽内容(http://dsmorse.github.io/gridster.js/demos/custom-drag-handle.html)：使用handle定义拖动元素。
③放大悬停(http://dsmorse.github.io/gridster.js/demos/expandable-widgets.html)：使用resize_widget方法悬停时展开模块。
④示例序列化(http://dsmorse.github.io/gridster.js/demos/grid-from-serialize.html)：通过JSON序列生成一个gridster实例[有了这个方法我们就可以方便的从数据库读取用户的模块位置定义]。
⑤同一页面多个Gridster实例(http://dsmorse.github.io/gridster.js/demos/multiple-grids.html)：通过配置参数namespace在同一个页面配置多个gridster实例。
⑥改变模块大小(http://dsmorse.github.io/gridster.js/demos/resize.html)：通过拖动改变模块的大小。
⑦改变模块大小时添加的限制(http://dsmorse.github.io/gridster.js/demos/resize-limits.html)：使用resize.max_size和resize.min_size配置选项或者data-max-sizex，data-max-sizey， data-min-sizex和data-min-sizeyHTML属性调整大小时限制部件的尺寸。如果通过配置选项指定全局max_size，则可以在具有HTML数据属性或使用set_widget_max_size 方法的指定模块中重写
⑧序列化模块位置(http://dsmorse.github.io/gridster.js/demos/serialize.html)：使用serialize方法来获取模块的位置。返回一个可以JSON对象的对象数组。
⑨拖动的回调函数(http://dsmorse.github.io/gridster.js/demos/using-drag-callbacks.html)：拖动模块执行回调函数。
⑩改变模块大小后的回调函数(http://dsmorse.github.io/gridster.js/demos/using-resize-callbacks.html)：可调动模块大小并执行回调函数。
⑪动态网格宽度(http://dsmorse.github.io/gridster.js/demos/dynamic-grid-width.html):使用max_cols选项设置网格最大列
⑫响应式网格宽度(http://dsmorse.github.io/gridster.js/demos/responsive.html)：随屏幕大小变化而变化。
⑬具有较大模块的网格与模块交换点(http://dsmorse.github.io/gridster.js/demos/SwapDrop.html)：shift_larger_widgets_down设置为"false"。
⑭允许模块精确放置在任何位置的网格(http://dsmorse.github.io/gridster.js/demos/sticky-postion.html)
3.Demo
❶需要引入的文件
jquery.js(jQuery文件，gridster官方不提供下载，不多说了-> http://www.jquery.com )
jquery.gridster.js(gridster的主要脚本)
jquery.gridster.css(gridster的样式文件)
❷示例
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>gridster实例</title>
<!-- 调用jquery，注意目录位置！ -->
<script src="./js/jquery-1.11.1.min.js" type="text/javascript"></script>
<!-- 调用gridster.js和css，注意放置的目录不要搞错了哦！ -->
<script src="./js/jquery.gridster.js" type="text/javascript"
charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="./js/jquery.gridster.css">
<script>
//通过javascript脚本来配置拖动实例，随后我们会讲每个配置参数的意义
//首先定义一个变量gridster，为了以后调用gridster的方法
var gridster;
$(function() {
gridster = $(".gridster ul").gridster({ //通过jquery选择DOM实现gridster
widget_base_dimensions : [ 100, 120 ], //模块的宽高 [宽,高]
widget_margins : [ 5, 5 ], //模块的间距 [上下,左右]
draggable : {
handle : 'header' //模块内定义拖动的元素<header>，这里也支持jquery选择器，如"span.drag_handle"
}
}).data('gridster');
});
</script>
<!-- 当然，除了调用gridster.js和css，你也可以为你的html写一些自己的style -->
<style>
.gridster ul {
margin: 0;
} .gridster ul li {
list-style-type: none;
border: 1px solid #e0e0e0;
} .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;
}
</style>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2"><header>请点击这里进行拖拽</header>
0</li><!-- 这里写了一个header，对应配置里面的handle，鼠标落到header上面可以拖，而不是整个块 -->
<li data-row="1" data-col="3" data-sizex="1" data-sizey="2"><header>请点击这里进行拖拽</header>
1</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><header>请点击这里进行拖拽</header>
2</li>
<li data-row="3" data-col="2" data-sizex="3" data-sizey="1"><header>请点击这里进行拖拽</header>
3</li>
<li data-row="4" data-col="1" data-sizex="1" data-sizey="1"><header>请点击这里进行拖拽</header>
4</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><header>请点击这里进行拖拽</header>
5</li>
<li data-row="4" data-col="2" data-sizex="1" data-sizey="1"><header>请点击这里进行拖拽</header>
6</li>
</ul>
</div>
</body>
</html>
4.参数及方法介绍
Options
widget_selector
示例：widget_selector: "li"
说明：定义可拖动模块的元素名称，支持css选择器
widget_margins
示例：widget_margins: [10, 10]
说明：模块的边距，第一个参数是上下边距，第二个参数是左右边距。
widget_base_dimensions
示例：widget_base_dimensions: [140, 140]
说明：模块的大小，第一个参数是宽度，第二个参数是高度。以像素为单位
extra_rows
示例：extra_rows: 0/extra_cols: 0
说明：添加行
extra_cols
示例：extra_cols: 0
说明：添加列
max_cols
示例：max_cols: null
说明：设置最大列数。max_cols: null为禁用
min_cols
示例：min_cols: 1
说明：设置最小列数
min_rows
示例：min_rows: 15
说明：设置最小行数
max_size_x
示例：max_size_x: false
说明：模块所占最大列数
autogenerate_stylesheet
示例：autogenerate_stylesheet: true
说明：默认为true，自动将模块的css样式插入到<head>标签中。设置为false时，手动的定义这些模块的位置。就像这样：[data-col="1"] { left: 10px; }
avoid_overlapped_widgets
示例：avoid_overlapped_widgets: true
说明：设置为true，不允许模块叠加，如果两个模块的位置一样（data-col和data-row来决定），程序会自动调整他们的位置，这样可以防止模块错乱
serialize_params
示例：serialize_params: function($w, wgd) { return { col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y } }
说明：自定义序列化的格式，这个函数的返回值将作为返回数组的一个元素，每个模块生成一个元素。使用serialize()方法时才用到此配置。$w的意思是JQuery的HTML元素，wgd的意思是widget data，gridster通过wgd可以直接取得诸如data-col等的配置，但是如果你想去的模块元素的id，，我们可以通过$w.attr("id")获取。
draggable.start
示例：draggable:{start: function(event, ui){}}
说明：拖动开始执行的函数
draggable.drag
示例：draggable:{drag: function(event, ui){}}
说明：拖动过程中鼠标移动时执行的函数
draggable.stop
示例：draggable:{stop: function(event, ui){}}
说明：拖动结束后执行的函数
resize.enabled
示例：resize:{enabled: false}
说明：默认false，设置为true时表示可以拖动模块的右下角改变模块大小
resize.axes
示例：resize:{axes: ['both']}
说明：设置改变模块大小时，鼠标可以向X轴还是Y轴移动，意思就是说你可以设置改变模块大小的宽度还是高度，设置为x只能改变模块宽度，设置为y只能改变高度，设置为both高和宽都可以改变。
resize.handle_class
示例：resize:{handle_class: 'gs-resize-handle'}
说明：设置改变模块大小时，拖动按钮的css类名称，默认是gs-resize-handle
resize.handle_append_to
示例：resize:{handle_append_to: ''}
说明：通过css选择器设置一个元素，这个元素将是拖动按钮的父元素，如果不设置，默认是这个模块（也就是widget_selector的值）
resize.max_size
示例：resize:{max_size: [Infinity, Infinity]}
说明：在改变模块大小的时候，为模块的最大宽高做限制
resize.start
示例：resize:{start: function(e, ui, $widget) {}}
说明：鼠标开始拖动大小的时候执行的函数
resize.resize
示例：resize:{resize: function(e, ui, $widget) {}}
说明：大小一旦改变执行的函数
resize.stop
示例：resize:{stop: function(e, ui, $widget) {}}
说明：鼠标停止调动大小时执行的函数
collision.on_overlap_start
示例：collision:{on_overlap_start: function(collider_data) { }}
说明：模块首次进入新网格单元时的回调。
collision.on_overlap
示例：collision:{on_overlap: function(collider_data) { }}
说明：模块在网格单元内移动时的回调。
collision.on_overlap_stop
示例：collision:{on_overlap_stop: function(collider_data) { }}
说明：模块首次离开旧网格单元时的回调。
Methods
.add_widget( html, [size_x], [size_y], [col], [row] )
参数：
html String | HTMLElement
表示模块的节点或字符串将被添加。
size_x 数字
模块占用的行数。默认为1。
size_y 数字
模块占用的列数。默认为1。
col 数字
模块应该启动的列。
row 数字
模块应该开始的行。
说明：用给定的html创建一个新的模块并将其添加到网格中。返回表示已调整大小的模块的节点。
.resize_widget( $widget, [size_x], [size_y], [reposition], [callback] )
参数：
$ widget HTMLElement
模块将被调整大小。
size_x 数字
模块将要跨越的行数。默认为当前size_x。
size_y 数字
模块要跨越的列数。默认为当前size_y。
reposition 布尔值
如果右侧没有足够的空间，则设置为false以不移动窗口模块到左侧。默认情况下size_x，仅限于模块开始处的列可用空间，直到最后一列位于右侧。
说明：更改模块的大小。宽度限制为当前网格宽度。返回表示已调整大小的模块节点。
.remove_widget( el, [callback] )
参数：
EL HTMLElement
你想要移除的模块节点。
回调函数
模块被移除时的回调。
说明：从网格中移除一个模块。返回Gridster类的实例。
.serialize( [$widgets] )
参数：
$ widgets HTMLElement
序列化的节点。如果没有参数传递，所有的模块都会被序列化。
说明：创建一个对象数组，表示网格中所有模块的当前位置。使用serialize_params选项中指定的数据返回一个对象数组。
.serialize_changed( )
说明：创建一个对象数组，表示已更改位置的模块的当前位置。使用serialize_params选项中指定的数据返回一个对象数组。
.enable( )
说明：启用拖动。返回Gridster类的实例。
.disable( )
说明：禁用拖动。返回Gridster类的实例。
可拖动布局之Gridster的更多相关文章
- jQuery实现拖动布局并将排序结果保存到数据库
很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置,也就是说拖动后各模块的排序位置信息是记录在客户端的cookie里的.当用户清空客户端的cookie或浏览器的cookie过 ...
- 【精心挑选】15款最好的 jQuery 网格布局插件（Grid Plugins）
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- jQuery 网格布局插件
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- 15款最好的 jQuery 网格布局插件
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法
故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动, 单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...
- duilib拖动控制功能的实现（源代码）
转载请注明原始出处.谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件添加拖拽的功能.而实 ...
- HTML布局排版1清除body的margin
观察可发现,一般的HTML页面分为上中下三部分,上边是导航一栏,中间是内容,下方是页面的下部分.注意html里body本身自带8px的上下左右外边距,如图,在qq浏览器和ie里可以看到body本身是8 ...
- Qt编写数据可视化大屏界面电子看板5-恢复布局
一.前言 恢复布局这个功能在整个数据可视化大屏界面电子看板系统中非常有用,很多时候不小心把现有布局拖动乱了,(当然如果不想布局被拖动改动,可以修改配置文件中的MoveEnable参数来控制,默认为真表 ...
- PyQt5布局管理器
布局分类 绝对定位:使用move方法将空间直接定死在某个坐标,不会随着窗口大小的改变而改变 可变布局:使用各种布局管理器,实现组件的位置和大小随着窗口的变化而变化 布局管理器 QHBoxLayout: ...
随机推荐
- myeclipse 10怎么安装与激活
http://jingyan.baidu.com/article/5553fa82eae0ce65a2393406.html
- 2017-07-03(VIM ACL权限 )
VIM 底行模式 :w 保存 :q 退出 :! 强制执行 :ls 列出打开的所有文件 :n 进行下一个查询 :15 定位到15行 /xxx 从光标处向下查找xxx出现的位置 ?xxx 从光标处向上查找 ...
- Java多线程之线程的通信
Java多线程之线程的通信 在总结多线程通信前先介绍一个概念:锁池.线程因为未拿到锁标记而发生的阻塞不同于前面五个基本状态中的阻塞,称为锁池.每个对象都有自己的锁池的空间,用于放置等待运行的线程.这些 ...
- test for python socket
server: #!/usr/bin/python import socket import threading import time def tcplink(sock, addr): print ...
- org.json.JSONObject的optXXX方法
JSONObject有很多optXXX方法,比如optBoolean,optString,optInt.... 他们的意思是:如果这个JSONObject对象,如果有返回这个属性的值,如果没有返回一个 ...
- 常用API
1 System类 System类包含一些有用的类和字段.它不能被实例化. 属性和方法都是静态的. 1.1 常见方法 返回以毫秒为单位的当前时间 public static long currentT ...
- matlab输入输出语句（input、disp、fprintf）
输入语句 输入数值 ?x=input('please input a number:') please input a number:22 x = 22 输入字符串 ?x=input('please ...
- C#面向对象方式设置、读取应用配置
关注点: 1.用面向对象方式的方式(get,set)访问和设置配置项 2.“CallerMemberName”在.net 4以下的变通方式 最后一周了,大伙都进入过年模式了.身还在,心已远.最近事情不 ...
- Asp.net core 2.0.1 Razor 的使用学习笔记（五）
按说这里应该写关于Role角色类的笔记,但是我还没时间实验这块,所以等以后我搞定了再来分享.现在先写其他部分. Asp.net core 2.0.1 Razor 的使用学习笔记——建立模型 按照微软官 ...
- Codeforces C. Classroom Watch
C. Classroom Watch time limit per test 1 second memory limit per test 512 megabytes input standard i ...