使用jquery-ui.js的sortable做一個tabe拖曳排序功能-教學撰寫:徐嘉裕Neil hsu

現在很多網站排序都是採用拖曳式的，但拖曳也並非萬能，像是有分頁的資料或是有幾百筆以上的資料或是階層式資料用拖曳就很累了，還是用輸入排序編號比較方便，所以如果要用拖曳的排序最好是在20~30筆以內資料為佳，這裡分享一個使用jquery-ui.js的sortable做一個tabe拖曳排序功能方法如下：

HTML結構部分(紅字為拖曳需要增加的部分)

<table class='table  sortable'>
<thead>
<tr>
<th>標題1</th>
<th>標題2</th>
<th>標題3</th>
</tr>
</thead>
<tbody>
<tr class='tr' id='1'>
<td>text1</td>
<td>text1</td>
<td>text1</td>
</tr>
<tr class='tr'  id='2'>
<td>text1</td>
<td>text1</td>
<td>text1</td>
</tr>

<tr class='tr' id='3'>

<td>text1</td>
<td>text1</td>
<td>text1</td>
</tr>
</tbody>
</table>

//引入JS(如Xoops佈景已有引入則不需重複引入)

<script src="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

//引入拖曳JS函數

<script>dragmenufunction();</script>  

說明：

1、table的class定義sortable是讓js的sortable()觸發用的。

2、tr定義的class='tr'是讓sortable()只拖曳有定義的部分，而不會連同thead的tr表頭一起拖曳

3、如果是PHP迴圈則id內容應該放置資料表的PRIMARY KEY欄位，sortable()中的sortable("toArray")可以取得全部拖曳後的id順序作為寫入資料表排序之用。

JS結構部分

建立一個js檔或是在已經有引入的js檔中貼上以下的function

//拖曳選單
function dragmenufunction() { 

$(".sortable").sortable({
cursor: "move",
items :".tr",  //指定拖曳元件或ID及CLASS
opacity: 0.6, //拖動時，透明度為0.6
revert: false, //釋放時，增加動畫
update : function(event, ui){ //更新排序之後
$toArray=$(this).sortable("toArray"); //更新拖曳後排序取id值

//AJAX開始
$.ajax({
url:ajax.php',
type: 'POST',
data: { 
Arr: $toArray  //更新拖曳後排序取id值以陣列方式傳值到AJAX中

},
success: function(response) {
alert("已更動按鈕排序");

},

error: function() {
console.log('ajax error!');
}
}) //AJAX結束
}
});
}

AJAX.PHP結構部分

$Arr=isset($_REQUEST['Arr'])?$_REQUEST['Arr']:""; //陣列

foreach($Arr as $key=> $val){
//儲存更新排序
$setvar="set btnsort='".$key."' where id='".$val."'";
update($dbname="menuDB",$set=$setvar);
}

說明：接收JS傳值過來的$Arr陣列用foreach解開， where中的id對應$val值，然後btnsort排序欄位存入$key值(按迴圈產生1.2.3.4)重新產生排序順序，這樣就OK了，來測試看看!

目前按鈕順序是 按鈕名稱01->按鈕名稱02->按鈕名稱03->按鈕名稱04

然後我們拉動順序吧 按鈕名稱04拉到按鈕名稱01上方，再F5更新頁面!!

測試結果拖曳的排序順序有寫入更新資料表，F5更新頁面後排序仍然與拖曳時一樣，這樣就沒問題了，有需要的朋友可以參考看看!

參考資料來源：jQuery UI sortable()實現拖動排序 - IT閱讀 (itread01.com)

工作心得撰寫：徐嘉裕 Neil hsu