<!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. ORACLE 11G在存储过程里面遍历游标, 调用job任务定时运行

    ORACLE存储过程里游标遍历.调用job定时运行 1,第一种使用For 循环 for循环是比較简单有用的方法. 首先.它会自己主动open和close游标.攻克了你忘记打开或关闭游标的烦恼. 其次, ...

  2. C++ 智能指针 shared_ptr

    今天晚上去旁听了C++高级编程的课,其中提到智能指针.第一反映还以为是auto_ptr呢,一听才知道是share_ptr这个.哦,原来是C++11特性.大致的原因是auto_ptr有一点缺陷,而sha ...

  3. Kibana查询说明

    elasticsearch构建在Lucene之上,过滤器语法和Lucene相同 Kibana接口概述 Kibana接口分为四个主要部分: 发现 可视化 仪表板 设置 我们将按照列出的顺序浏览每个部分的 ...

  4. java 多线程10:synchronized锁机制 之 锁定类静态方法 和锁定类.Class 和 数据String的常量池特性

    同步静态方法 synchronized还可以应用在静态方法上,如果这么写,则代表的是对当前.java文件对应的Class类加锁.看一下例子,注意一下printC()并不是一个静态方法: public ...

  5. 纯css3实现的创意图片放大镜

    今天要给大家分享的的一款用纯css3实现的图片放大镜特效.页面打开五个小图显示于页面.当鼠标经过图片时,当前图片以灰色背景图的形式展示.效果非常不错. 在线预览   源码下载 实现的代码: html代 ...

  6. Ubuntu 16.04使用git

    Ubuntu 16.04安装git 安装完RabbitVCS之后,Android studio里git还是没法用,找不到git程序,git命令也找不到,说明没有安装git! sudo apt-get ...

  7. 【Unity/Kinect】显示Kinect摄像头内容,屏幕显示环境背景及人体投影

    最近学习用Unity做些体感小游戏,使用Kinect的Unity插件,结合一些官方Demo学习(网上资源用Unity做的较少,蛋疼).插件及其Demo就在Unity商店里搜Kinect即可找到,其中下 ...

  8. PDNN中数据格式和数据装载选项

    吃人家嘴短,拿人家手短,用别人的东西就不要BB了,按规矩来吧. 训练和验证的数据都在命令行以变量的形式按如下方式指定: --train-data "train.pfile,context=5 ...

  9. java多线程面试题整理及回答

    1)现在有T1.T2.T3三个线程,你怎样保证T2在T1执行完后执行,T3在T2执行完后执行? 这个线程问题通常会在第一轮或电话面试阶段被问到,目的是检测你对”join”方法是否熟悉.这个多线程问题比 ...

  10. iOS彩票项目--第一天,自定义TabBar控制器和自定义TabBar,自定义导航控制器

    一.环境配置,和项目层次搭建 二.自定义TabBar 项目中TabBar中的导航按钮美工给的图片太大,图片中包含了图片和文字.最主要的是TabBar上面的按钮图片尺寸是有规定的,当高度大于44的时候, ...