<!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. [na]二层+tcp/udp数据包格式

    标准:6+6+2+3    =17            3 思科:6+6+2+3+3=20           6 ip首部格式 tcp首部格式

  2. mysqldump 备份某张表 Warning: A partial dump from a server that has GTIDs will by default include the GTIDs of all transactions,

    [root@NB ok]# mysqldump -uemove -h xx.xx.xx.xx -P9906 DBname t_name -p >2t_tname.sqlWarning: A pa ...

  3. LeetCode: Count and Say 解题报告

    Count and Say The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, ...

  4. Android Studio使用心得

    说实话 開始接触这个工具 真的认为非常恶心 毕竟大陆被墙  非常多东西用起来不是非常方便 并且Eclipse转到Android Studio还是一个跨度 废话不多说  以下 讲下我遇到的问题 1. 安 ...

  5. 【Visual Studio】控制台程序运行时一闪而过

    问题:写一个C#控制台程序,运行时控制台一闪而过.程序结束.无法看清控制台输出的结果. 办法: 方法一二三都有人写过百度经验了:怎么解决VS运行程序一闪而过 其实还有一种办法,就是把控制台程序改为Wi ...

  6. git学习(三)：git暂存区

    回顾之前学过的命令: git init // 初始化一个项目 git add // 将文件交给工作区 git commit // 提交修改 查看提交日志: git log // 查看提交日志 git ...

  7. kernel 3.2.0 上加入自己的板级文件

    第一步.复制自己的参考的板级文件 cp arch/arm/mach-omap2/board-am335xevm.c arch/arm/mach-omap2/board-aplex_ECM_5412.c ...

  8. FusionCharts JavaScript API Column 3D Chart

    Column 3D Chart labelDisplay  label显示的方式 设置为AUTO 可以根据密度自动排列 slantLabels 0/1  与labelDisplay配合使用 如果lab ...

  9. java中静态方法的使用

    JAVA中使用静态方法 编程时我们心里一定要清楚静态方法和类的非静态方法方法的区别: 最根本区别从编译角度来说吧: 1) 静态(static)方法是编译时直接加载加载到内存中(离cpu最近的一块内存区 ...

  10. yaffs2文件镜像制作工具yaffs2image

    1.  不同nand容量,工具不一样. 首先使用的是mkyaffs2image,编译生成根文件系统的镜像之后,下载到板子上,启动的时候报错,错误代码这里没有上传.问题出在工具使用的不正确,查看工具目录 ...