jQuery div网格布局可拖动实现自由布局

原创
2019/06/25 15:52
阅读数 4.5K

此功能参考http://www.datouwang.com/jiaoben/761.html中的资源,感谢!

此参数的说明参考自https://www.cnblogs.com/JealousGirl/p/useGridster.html,感谢!

页面效果

拖动后效果

具体实现:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>EasyUI Draggable 测试Demo</title>
<link rel="stylesheet" type="text/css"
	href="homePage/css/jquery.gridster.min.css">
<link rel="stylesheet" href="homePage/css/style.css">
<script type="text/javascript" src="homePage/js/jquery-1.7.2.min.js"></script>
<script src="homePage/js/jquery.gridster.js" type="text/javascript"></script>

</head>
<body>
	<div class="demo">
		<div class="gridster">
			<ul>
			<li data-row="1" data-col="1" data-sizex="5" data-sizey="2"></li>
			<li data-row="1" data-col="2" data-sizex="5" data-sizey="2"></li>
			<li data-row="1" data-col="2" data-sizex="5" data-sizey="2"></li>
			<li data-row="1" data-col="2" data-sizex="5" data-sizey="2"></li>
			</ul>
		</div>
	</div>
	<script>
			var gridster;
	
			$(function() {
	
				gridster = $(".gridster > ul").gridster({
					widget_margins : [ 10, 10 ],
					widget_base_dimensions : [ 150, 140 ],
					min_cols : 4
				}).data('gridster');
	
			});
	</script>
</body>
</html>

案例代码下载链接:

http://www.datouwang.com/jiaoben/761.html

参数及方法介绍(参考自 https://www.cnblogs.com/JealousGirl/p/useGridster.html

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

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类的实例。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部