針對后臺列表table拖拽比較實用的jquery拖動排序
更新時間：2016年10月10日 14:16:50 作者：xiuber
這篇文章主要為大家詳細介紹了比較實用的jquery拖動排序,具有一定的參考價值，感興趣的小伙伴們可以參考一下
現(xiàn)在很多后臺列表為了方便均使用拖拽排序的功能，對列表進行隨意的排序。
話不多說 ，我在網(wǎng)上找了一些demo，經(jīng)過對比，現(xiàn)在把方便實用的一個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>阿薩德發(fā)射點發(fā)歲的</td>
</tr>
<tr>
<td class="index">3</td>
<td>2016</td>
<td>這是第3個</td>
<td>阿薩德發(fā)送地方</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();
});
這是我發(fā)現(xiàn)的比較實用的一個拖動排序，還是比較方便的。
相關文章
這篇文章主要介紹了easyui 切換主題皮膚方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
Jquery中offset()和position()的區(qū)別分析
這篇文章主要介紹了Jquery中offset()和position()的區(qū)別,實例分析了offset()與position()的使用的技巧與區(qū)別,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
下面小編就為大家?guī)硪黄狫Query 獲取Dom元素的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
jQuery插件slicebox實現(xiàn)3D動畫圖片輪播切換特效
Slicebox是一款效果非常華麗的jquery和css3 3d幻燈片插件。Slicebox幻燈片插件能夠將圖片切片，然后做3d旋轉。Slicebox幻燈片插件共有4種效果，視覺沖擊感非常強。2015-04-04
從jQuery1.7開始，jQuery引入了全新的事件綁定機制，on()和off()兩個函數(shù)統(tǒng)一處理事件綁定，下面通過示例為大家介紹下2014-07-07
下面小編就為大家?guī)硪黄仙Ｕ刢ombobox和combotree模糊查詢。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了jQuery子元素過濾選擇器用法,結合實例形式分析了jQuery中nth-child、first-child、last-child、only-child等進行子元素過濾操作的相關技巧,需要的朋友可以參考下2016-09-09
jQuery向后臺傳入json格式數(shù)據(jù)的方法
這篇文章主要介紹了jQuery向后臺傳入json格式數(shù)據(jù)的方法,實例分析了傳遞json格式數(shù)據(jù)的原理與具體實現(xiàn)技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2015-02-02
jquery $("#variable") 循環(huán)改變variable的值示例
這篇文章主要介紹了jquery $("#variable")如何循環(huán)改變variable的值,需要的朋友可以參考下2014-02-02
jQuery oLoader實現(xiàn)的加載圖片和頁面效果
我們使用jQuery的ajax在頁面中就像使用iframe一樣加載其他頁面內(nèi)容，今天我給大家分享一個名叫jQuery oLoader的插件，該插件還集成了oPageLoader，可以輕松實現(xiàn)加載圖片和頁面的漂亮效果。2015-03-03