[JQuery] Sortable 拖曳排序結合資料庫 (二)
在之前拖曳排序時使用的方法為雙向鏈結的方式，但是在資料的新增、刪除時需要做額外的動作，在整合至現有的系統上時需要修改的幅度也會比較大，比較沒那麼方便，所以後來有找到一些其他的方法。
在此的方法為在資料庫中新增一個用來排序的欄位("SORT")(欄位名稱可自行修改)，然後將此欄位編上編號 1~N，在查詢資料出來的時候只要用order by sort asc/desc就可以正向排序或反向排序了。
下圖為資料、排序欄位
![[JQuery] Sortable 拖曳排序結合資料庫 (二)](https://fun-program.net/wp-content/uploads/2016/05/sortable_explain_pic_2.png "[JQuery] Sortable 拖曳排序結合資料庫 (二)")
當拖曳結束後，會以該次版面上的資料順序將SORT欄位做更新(如果順序有異動時)。所以資料新增時如果將SORT預設為0，那新增的資料就會在最前面，拖曳後才會給予排序的編號。
程式碼詳細部分待之後補上
2016-10-28 程式碼修改(資料庫為原始php mysql連接方法，如有資料庫連結的函式庫可以改用凾式庫撈資料與更新資料的方法)
以上為版面主體php檔
79行，$("#sortable").sortable({ //code })，這邊抓取id為sortable的元素下去作為draggable的主框架，所以內容物< img src="" data-sort="" class="sorting">< /img>便可以拖曳排序
90行，$(".sorting").each(function(index){}，透過遍歷來將class為sorting元素屬性data-sort的值丟給new_sort_string，index值+1丟給key_string，中間用逗號串聯
95行使用jquery ajax將2個字串丟給sort.php檔案，operation的GET值為sort_with_only
接下來的為sort.php檔案
18行，這邊從資料庫取出目前資料的排序，必須要注意的是取出時要order by sort asc，按照儲存排序值的欄位正向排序，id與sort必須為int值 拖曳結束後 例如 資料id(資料庫中的id值)順序為:2,3,4,5,1 資料sort值(由拖曳結束後版面上的元素順序自動增加[由1開始]自動遞增至目前版面上的元素總數量)順序為:1,2,3,4,5
23行，將從資料庫中取出的值一筆一筆與版面目前的順序new_sort_string相互做比對
24行，if($val["id"] != $new_col_sort[$key]){}就會判斷如果資料庫所取出的資料順序與目前版面上的元素排放順序不一樣時便會將sort值更新為版面元素的排放順序，條件是id為版面上的第$key個的data-sort值
在這範例程式中最重要的為id="sortable"的主框架、遍歷使用的class="sorting"和目前資料的排序data-sort=""
例如可將sortable移至table上，sorting與data-sort移至tr上，並將//axis: "x",註解拿掉改成axis: "y",便可以拖曳表格的tr來作為排序的依據
![[JQuery] Sortable 拖曳排序結合資料庫 (二)](https://fun-program.net/wp-content/uploads/2016/12/sortable_explain_pic_2_2.png "[JQuery] Sortable 拖曳排序結合資料庫 (二)")
