jQuery div網格佈局可拖動實現自由佈局

時間  2019-12-06
標籤 jquery div 網格 佈局 拖動 實現 自由 欄目 JQuery 简体版
原文   原文鏈接

此功能參考http://www.datouwang.com/jiaoben/761.html中的資源，感謝！javascript

此參數的說明參考自https://www.cnblogs.com/JealousGirl/p/useGridster.html，感謝！css

頁面效果html

拖動後效果java

具體實現：jquery

<%@ 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.htmlapp

參數及方法介紹（參考自 https://www.cnblogs.com/JealousGirl/p/useGridster.html）ide

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類的實例。測試

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程