<!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();
});

针对后台列表table拖拽比较实用的jquery拖动排序的更多相关文章

  1. jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）

    现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...

  2. ztree插件的使用及列表项拖拽的实现（jQuery）+异步加载节点数据

    为了实现如图所示的树状结构图,并使列表项可拖动到盒子里,研究了ztree这个插件的使用,并仔细研究了列表项的拖动事件.完成了预期需求,对jQuery的运用得到了提高.这个插件的功能非常强大,除了基本的 ...

  3. Qt之股票组件-自选股--列表可以拖拽、右键常用菜单

    目录 一.开头嘴一嘴 二.效果展示 三.自选股列表 1.列表初始化 2.添加Item 3.右键菜单 4.拖拽Item 5.刷新数据 四.相关文章 原文链接:Qt之股票组件-自选股--列表可以拖拽.右键 ...

  4. Android学习系列(11)--App列表之拖拽ListView(下)

    接着上篇Android学习系列(10)--App列表之拖拽ListView(上)我们继续实现ListView的拖拽效果. 7.重写onTouchEvent()方法.     在这个方法中我们主要是处理 ...

  5. Android学习系列(10)--App列表之拖拽ListView(上)

     研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨.      鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. ...

  6. Android学习系列--App列表之拖拽ListView(下)

    接着上篇Android学习系列(10)--App列表之拖拽ListView(上)我们继续实现ListView的拖拽效果. 7.重写onTouchEvent()方法.     在这个方法中我们主要是处理 ...

  7. Android学习系列--App列表之拖拽ListView(上)

    研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨.      鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. 一 ...

  8. 基于html5拖拽api实现列表的拖拽排序

    基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

  9. odoo开发笔记-tree列表视图拖拽排序

    odoo列表tree视图 拖拽排序 实现效果: 实现方式: 模型中定义字段: class CusYourModel(models.Model): """ 你的模型 &qu ...

随机推荐

  1. 使用Xcode 5创建Cocoa Touch Static Library（静态库）

    转自:http://blog.csdn.net/jymn_chen/article/details/21036035 首先科普一下静态库的相关知识: 程序编译一般需经预处理.编译.汇编和链接几个步骤. ...

  2. TreeView 高速单击时不运行AfterCheck时间

    解决方法1: 在AfterCheck事件中,通过System.Threading.Thread.Sleep()来控制函数的运行的最短时间.保证函数运行时间必须大于某个值 解决方法2: 编写列TreeV ...

  3. 更新yum源却忘了生成缓存　造成每次启动机器报：the package list needs to be rebuilt

    更新yum源的后一定要执行下面的两条命令: yum clean all yum makecache  注意:如果有第三方源的时候是,开机发果不联网的时候,也会报这个错!!!!!

  4. angular学习笔记(十四)-$watch(4)

    如果需要同时监测多个属性或者对象,并且执行的是同样的回调,可以有两种选择: 1. 监测这些属性连接起来之后的值: $scope.$watch('objOne.a+objTwo.b+...', watc ...

  5. Linux写时拷贝技术（copy-on-write）

    1.传统的fork()函数创建一个子进程,子进程和父进程共享正文段,复制数据段,堆,栈到子进程示意图如下: 2.Linux的fork()函数-写时复制(copy-on-write)创建一个子进程,内核 ...

  6. Spring Boot干货系列：（六）静态资源和拦截器处理

    Spring Boot干货系列:(六)静态资源和拦截器处理 原创 2017-04-05 嘟嘟MD 嘟爷java超神学堂 前言 本章我们来介绍下SpringBoot对静态资源的支持以及很重要的一个类We ...

  7. 开发中tomcat缓存问题

    tomcat-清除缓存 方法一:  conf/server.xml文件  Context path中间加上reloadable="true"  例如:<Context pat ...

  8. dp之混合背包poj1742（推荐）

    题意:给你价值为a1,a2.....的货币,每种有c1,c2.......个,求这些货币所能组成的价值小于等于m有多少个..... 思路:很像一道多重背包题?那我一开始的确是用多重背包的思路编写的.. ...

  9. 【Unity/Kinect】Kinect入门——项目搭建

    本文是Unity Store里的官方Demo包中的ReadMe翻译(别人翻的),介绍了用Unity如何入门搭建起一个Kinect项目工程. 非常感谢下面这位大大的无私奉献! http://www.ma ...

  10. 【WPF】给下拉列表ComboBox绑定数据

    思路:给ComboBox控件设置它的ItemSource绑定到ViewModel中的某个列表上,该列表是某个实体类的集合(如List< Person >),而ComboBox列表要显示的是 ...