<!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. 【Android】7.6 FrameLayout（帧布局）

    分类:C#.Android.VS2015: 创建日期:2016-02-11 一.简介 帧布局是显示多个层次图的有效手段.比如第3章介绍的百度地图就是利用帧布局来实现的,它将图层分为22级分别缓存到指定 ...

  2. 【Android】7.0 第7章 简单适配器和布局--本章示例主界面

    分类:C#.Android.VS2015: 创建日期:2016-02-09 修改日期:2016-02-13 一.在AssemblyInfo.cs文件中配置应用程序清单 前面的章节我们说过,除了在And ...

  3. 【Android】6.3 ProgressDialog

    分类:C#.Android.VS2015: 创建日期:2016-02-08 一.简介 进度条对话框(ProgressDialog)常用于不能在短时间内快速完成的操作,显示进度条的目的是为了让用户明白程 ...

  4. android Handlerr.removeCallbacksAndMessages(null)的妙用

    今天在阅读代码发现了android  Handlerr.removeCallbacksAndMessages(null)代码 在ondestory()调用,之前没用过,那想弄懂咋办,查api: pub ...

  5. Linux下adb的配置

    进入当前用户主目录 yongdaimi@ubuntu:~$ cd ~ 打开.bashrc文件 yongdaimi@ubuntu:~$ vi .bashrc 在文件末尾添加下列代码 export ADB ...

  6. Wamp错误: Forbidden You don't have permission to access / on this server.

    找到php的配置文件httpd.conf(找不到的话看这篇:http://www.cnblogs.com/liulangmao/p/3569807.html) 在原有的位置文件中找到配置节 <D ...

  7. spring整合kafka项目生产和消费测试结果记录（一）

    使用spring+springMVC+mybatis+kafka做了两个web项目,一个是生产者,一个是消费者. 通过JMeter测试工具模拟100个用户并发访问生产者项目,发送json数据给生产者的 ...

  8. 基于S3C2440的U-BOOT的start.S分析

    基于S3C2440的U-BOOT的start.S分析 在了解了ARM相关的汇编指令后,同时结合网上各位大虾的提点开始阅读u-boot的启动代码,现将分析过程记录如下 可执行文件及内存映射 我们可以把可 ...

  9. poj1564-Sum It Up(经典DFS)

    给出一个n,k,再给出的n个数中,输出所有的可能使几个数的和等于k Sample Input 4 6 4 3 2 2 1 15 3 2 1 1400 12 50 50 50 50 50 50 25 2 ...

  10. hdu1495(经典bfs，平分水问题)

    思路:搜索题,第一次做这种类型的题目吧,一开始表示不怎么明白题意所说的东东.其实就是要你判断可乐能不能被平分........ 有六种状态,从a瓶到b瓶,a-->c b-->a     b- ...