看過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的樣式文件)
❷示例
1 <!Doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>gridster實例</title>
6 <!-- 調用jquery，注意目錄位置！ -->
7 <script src="./js/jquery-1.11.1.min.js" type="text/javascript"></script>
8 <!-- 調用gridster.js和css，注意放置的目錄不要搞錯了哦！ -->
9 <script src="./js/jquery.gridster.js" type="text/javascript"
10 charset="utf-8"></script>
11 <link rel="stylesheet" type="text/css" href="./js/jquery.gridster.css">
12 <script>
13 //通過javascript腳本來配置拖動實例，隨后我們會講每個配置參數的意義
14 //首先定義一個變量gridster，為了以后調用gridster的方法
15 var gridster; 16 $(function() { 17 gridster = $(".gridster ul").gridster({ //通過jquery選擇DOM實現gridster
18 widget_base_dimensions : [ 100, 120 ], //模塊的寬高 [寬,高]
19 widget_margins : [ 5, 5 ], //模塊的間距 [上下,左右]
20 draggable : { 21 handle : 'header' //模塊內定義拖動的元素<header>，這里也支持jquery選擇器，如"span.drag_handle"
22 } 23 }).data('gridster'); 24 }); 25 </script>
26 <!-- 當然，除了調用gridster.js和css，你也可以為你的html寫一些自己的style -->
27 <style>
28 .gridster ul {
29 margin: 0;
30 }
31
32 .gridster ul li {
33 list-style-type: none;
34 border: 1px solid #e0e0e0;
35 }
36
37 .gridster ul li header {
38 background: none repeat scroll 0% 0% #999;
39 display: block;
40 font-size: 20px;
41 line-height: normal;
42 padding: 4px 0px 6px;
43 margin-bottom: 20px;
44 cursor: move;
45 text-align: center;
46 }
47 </style>
48 </head>
49 <body>
50 <div class="gridster">
51 <ul>
52 <li data-row="1" data-col="1" data-sizex="2" data-sizey="2"><header>請點擊這里進行拖拽</header>
53 0</li><!-- 這里寫了一個header，對應配置里面的handle，鼠標落到header上面可以拖，而不是整個塊 -->
54 <li data-row="1" data-col="3" data-sizex="1" data-sizey="2"><header>請點擊這里進行拖拽</header>
55 1</li>
56 <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><header>請點擊這里進行拖拽</header>
57 2</li>
58 <li data-row="3" data-col="2" data-sizex="3" data-sizey="1"><header>請點擊這里進行拖拽</header>
59 3</li>
60 <li data-row="4" data-col="1" data-sizex="1" data-sizey="1"><header>請點擊這里進行拖拽</header>
61 4</li>
62 <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><header>請點擊這里進行拖拽</header>
63 5</li>
64 <li data-row="4" data-col="2" data-sizex="1" data-sizey="1"><header>請點擊這里進行拖拽</header>
65 6</li>
66 </ul>
67 </div>
68 </body>
69 </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類的實例。