九宮格，也叫做快速撥號（Speed dial），是現代瀏覽器一個非常重要的功能，用戶可以在空白頁上定制和放置自己喜愛的網站，這樣可以方便的打開所需的網站，無需輸入和記憶網址。  ?????? 九宮格頁面一般由9個格子到16格子組成，每個格子可以自由的拖動以交換位置。下面我們來實現一個簡單的3*3九宮格。 ????? 我們先定義一個容器來放置3*3個格子，定義它的寬度為3個格子的寬度之和再加中間的間距。然后在上面放置9個浮動的格子。  ????? 為格子添加一些表現效果： ????? background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgba(255, 255, 255, 0.75)), to(rgba(222, 231, 233, 0.7))); /* 半透明漸變背景 */ ????? border: 1px rgba(0, 0, 0, 0.24) solid; /* 半透明邊框 */ ????? -webkit-border-radius: 3px; /* 邊框圓角 */ ????? box-sizing: border-box; /* 盒子模型 */ ????? -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 7px;????? /* 盒陰影 */ ????? 效果如下圖所示： ?????  ????? 設置透明度的原因是可以為九宮格添加背景設置功能，如下圖所示： ?????  ????? 下面為格子添加hover效果，我們可以利用jQuery的animate API為hover效果添加淡入淡出的支持。淡入淡出的原理是讓hover的效果綁定在一個容器上，這個容器和格子完全重疊，在鼠標mouseover時讓這個容器的透明度從0變為1，mouseout時透明度從1變為0。核心代碼如下： ~~~ *??? $('.hover', this).stop().animate({* *??????? 'opacity': 0* *}, 150);* ~~~ 然后初始化一些數據。  下面我們來實現最重要的拖拽功能。jQuery的插件jQuery UI提供了元素拖拽和排序的支持，可以極大的減少我們的工作量。 ~~~ *?????? $('#start-nine-box').sortable({* *????????????? zIndex: 30, // **拖拽總在最上*** *????????????? revert: true, // **拖拽的元素未排序時放置后平滑回到原位置*** *?????? });* ~~~ 這樣可以很方便的實現九宮格的位置交換功能，但是帶來一個問題。拖拽交換序號為6和9的格子后如下圖所示：  6移到9的位置后，7、8、9格子都向前移動了一位，而不是6和9進行交換。使用原生的sortable函數帶來的排序是填位排序，而不是交換排序。所以我們不能直接使用sortable函數，我們考慮使用控制拖拽的draggable和控制拖放的droppable函數實現。 首先設定拖拽。 ~~~ *?????? $(selector).draggable({* *????????????? zIndex: 30, // **拖拽總在最上*** *????????????? revert: true, // **拖拽的元素未排序時放置后平滑回到原位置*** *????????????? containment: 'window'* *?????? });* ~~~ 然后設定拖放： ~~~ *?????? $(selector).droppable({ * *????????????? drop: function(event, ui) { // **拖拽放下時*** *???????????????????? var dropElement = $(this).get(0); // drop element* *???????????????????? var dragElement = ui.draggable[0]; // drag element* *????????????? },* *?????? });* ~~~ 交換排序的處理可以有很多方式，最簡單的一種是完全交換兩個元素的內容： ~~~ *?????? // **交換兩個元素的內容*** *????? var dropElementHTML = dropElement.outerHTML; * *????? var dragElementHTML = dragElement.outerHTML;? * *???????????????????? * *????? dropElement.outerHTML = dragElementHTML;* *????? dragElement.outerHTML = dropElementHTML;* ~~~ 這樣會造成一個問題，綁定在元素上的所有事件都會失效，包括draggable和droppable事件，所以需要重新綁定。 ~~~ *????? setDroppable('#' + dropElementId + ', #' + dragElementId); // **重用上面的方法*** ~~~ ????? 最后還可以添加一些界面效果來讓九宮格更加完美，例如拖動格子hover時的界面提示，我們可以讓下層的drop元素有一個顏色淡入淡出的效果，只需在droppable的over和out事件里設定相應的處理。 ~~~ *???????over: function(event, ui) { // **拖到元素上時*** *???????????? $(this).stop().animate({* *???????????????? 'opacity': 0.5* *????????????? }, 150); // **設置**drop**的**opacity* *???????? },* *??????? out: function(event, ui) { // **拖出元素時*** *???????????? $(this).stop().animate({* *????????????????? 'opacity': 1* *???????????? }, 150); // **設置**drop**的**opacity* *??????? },* ~~~ 效果如下：  如此我們實現了一個簡單的九宮格，不過剩下還需要考慮很多細節問題，例如格子的resize，編輯功能。  另外作為瀏覽器默認頁面的九宮格是必須要進行性能測試和優化的，盡可能的減少加載時間和提高響應速度，這個和瀏覽器的交互都不在本文的討論范圍之內，會在后面的文章里闡述。