現在很多后台列表為了方便均使用拖拽排序的功能，對列表進行隨意的排序。
話不多說 ，我在網上找了一些demo，經過對比，現在把方便實用的一個demo列出來，基於jqueryUI.js
先上html代碼，很簡單：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖動</title> </head> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/jquery-ui.min.js"></script> <style> tr{cursor: pointer;} </style> <body> <table id="sort"> <thead> <tr> <th class="index">序號</th> <th>年份</th> <th>標題</th> <th>作者</th> </tr> </thead> <tbody> <tr> <td class="index">1</td> <td>2014</td> <td>這是第1個</td> <td>阿斯蒂芬阿斯蒂芬</td> </tr> <tr> <td class="index">2</td> <td>2015</td> <td>這是第2個</td> <td>阿薩德發射點發歲的</td> </tr> <tr> <td class="index">3</td> <td>2016</td> <td>這是第3個</td> <td>阿薩德發送地方</td> </tr> <tr> <td class="index">4</td> <td>2017</td> <td>這是第4個</td> <td>的說法大賽分</td> </tr> </tbody> </table> </body> </html>
除了要引入jquery.js 和jqueryUI.js外，還需要如下一段代碼：
$(document).ready(function(){ var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }, updateIndex = function(e, ui) { $('td.index', ui.item.parent()).each(function (i) { $(this).html(i + 1); }); }; $("#sort tbody").sortable({ helper: fixHelperModified, stop: updateIndex }).disableSelection(); });
這是我發現的比較實用的一個拖動排序，還是比較方便的。