<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jqueryUI拖動(dòng)</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">序號(hào)</th>
  <th>年份</th>
  <th>標(biāo)題</th>
  <th>作者</th>
 </tr>
 </thead>
 <tbody>
  <tr>
   <td class="index">1</td>
   <td>2014</td>
   <td>這是第1個(gè)</td>
   <td>阿斯蒂芬阿斯蒂芬</td>
  </tr>
  <tr>
   <td class="index">2</td>
   <td>2015</td>
   <td>這是第2個(gè)</td>
   <td>阿薩德發(fā)射點(diǎn)發(fā)歲的</td>
  </tr>
  <tr>
   <td class="index">3</td>
   <td>2016</td>
   <td>這是第3個(gè)</td>
   <td>阿薩德發(fā)送地方</td>
  </tr>
  <tr>
   <td class="index">4</td>
   <td>2017</td>
   <td>這是第4個(gè)</td>
   <td>的說法大賽分</td>
  </tr>
 </tbody>
</table>
</body>
</html>

復(fù)制代碼
除了要引入jquery.js 和jqueryUI.js外，還需要如下一段代碼：

復(fù)制代碼

 $(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)的比較實(shí)用的一個(gè)拖動(dòng)排序，還是比較方便的。

您可能感興趣的文章:

相關(guān)文章

jquery 頁(yè)面滾動(dòng)到指定DIV實(shí)現(xiàn)代碼
頁(yè)面滾動(dòng)到指定DIV的方法有很多，在本文將為大家介紹下jquery是如何實(shí)現(xiàn)的
2013-09-09
Jquery中的$.each獲取各種返回類型數(shù)據(jù)的使用方法
each()方法能使DOM循環(huán)結(jié)構(gòu)簡(jiǎn)潔，不容易出錯(cuò)。each()函數(shù)封裝了十分強(qiáng)大的遍歷功能，使用也很方便，它可以遍歷一維數(shù)組、多維數(shù)組、DOM, JSON 等等，在javaScript開發(fā)過程中使用$each可以大大的減輕我們的工作量。
2015-05-05
深入理解bootstrap框架之入門準(zhǔn)備
Bootstrap是最流行的前端開發(fā)框架。本文涉及到bootstrap的特性介紹，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-10-10
使用jQuery實(shí)現(xiàn)一個(gè)類似GridView的編輯,更新,取消和刪除的功能
在項(xiàng)目中遇到這樣的需求當(dāng)用戶點(diǎn)擊編輯時(shí)，在點(diǎn)擊行下動(dòng)態(tài)產(chǎn)生一行，編輯銨鈕變?yōu)閐isabled,新產(chǎn)生的一行有更新和取消的銨鈕，點(diǎn)擊“取消”銨鈕，刪除剛剛動(dòng)態(tài)產(chǎn)生的行，編輯銨鈕狀態(tài)恢復(fù)。下面小編給大家分享實(shí)例代碼，一起看看吧
2017-03-03
jQuery中toggle()函數(shù)的使用實(shí)例
關(guān)于jQuery中的toggle()函數(shù)，相信大家都非常的了解，網(wǎng)上也有許多的相關(guān)教程，今天要給大家分享的是在實(shí)際的項(xiàng)目中toggle()的使用方法，需要的小伙伴可以參考下。
2015-04-04
Asp.net下利用Jquery Ajax實(shí)現(xiàn)用戶注冊(cè)檢測(cè)（驗(yàn)證用戶名是否存）
最近在朋友做個(gè)網(wǎng)站http://www.smarteas.net/，其中用實(shí)現(xiàn)用戶注冊(cè)這功能，最近網(wǎng)站做到了尾聲，我也就把其它有些技術(shù)和大家分享一下。
2010-09-09
jQuery實(shí)現(xiàn)仿騰訊視頻列表分頁(yè)效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿騰訊視頻列表分頁(yè)效果的方法,涉及jquery頁(yè)面元素的運(yùn)算與動(dòng)態(tài)調(diào)用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
jquery select動(dòng)態(tài)加載選擇(兼容各種瀏覽器)
jquery select動(dòng)態(tài)加載選擇,兼容各種瀏覽器包括ie6,在ie6下會(huì)報(bào)錯(cuò),不過我們已有解決方法，感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)jquery有所幫助
2013-02-02
jQuery插件之validation插件
最常使用javascript的場(chǎng)合就是表單的驗(yàn)證，而jQuery作為一個(gè)優(yōu)秀的javascript庫(kù)，也提供了一個(gè)優(yōu)秀的表單驗(yàn)證插件——Validation。本文將詳細(xì)介紹validation插件。下面跟著小編一起來(lái)看下吧
2017-03-03
jQueryMobile之Helloworld與頁(yè)面切換的方法
這篇文章主要介紹了jQueryMobile之Helloworld與頁(yè)面切換的方法,實(shí)例分析了jQueryMobile的基礎(chǔ)用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02