现在很多后台列表为了方便均使用拖拽排序的功能，对列表进行随意的排序。

话不多说 ，我在网上找了一些demo，经过对比，现在把方便实用的一个demo列出来，基于jqueryUI.js

先上html代码，很简单：

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

    });

这是我发现的比较实用的一个拖动排序，还是比较方便的。

jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）的更多相关文章

  1. 针对后台列表table拖拽比较实用的jquery拖动排序

    <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8&qu ...

  2. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  3. ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...

  4. elment-ui table组件 -- 远程筛选排序

    elment-ui table组件 -- 远程筛选排序 基于 elment-ui table组件 开发,主要请求后台实现筛选 排序的功能. 需求 排序 筛选 是对后台整个数据进行操作,而不是对当前页面 ...

  5. Dedecms自定义表单后台列表展现方式更改

    Dedecms有自定义表单功能,方便我们收集用户信息.个人通常喜欢拿这个功能做问卷调查,在线留言等功能.但是如果使用过这个功能的朋友就会知道,Dedecms自定义表单后台列表展现方式并不好看. 上面就 ...

  6. js拖拽上传 文件上传之拖拽上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

  7. 使用Jquery.AJAX方法和PHP后台数据交互小结

    使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...

  8. 非常强大的table根据表头排序,点击表头名称,对其内容排序

    js代码: /** * 通过表头对表列进行排序 * * @param sTableID * 要处理的表ID<table id=''> * @param iCol * 字段列id eg: 0 ...

  9. ls按时间排序输出文件列表

    文件转自:http://www.2cto.com/os/201303/197829.html ls按时间排序输出文件列表   首先,ls --help查看ls相关的与时间排序相关的参数:   > ...

随机推荐

  1. OpenCV自带dnn的Example研究（6）— text_detection

    这个博客系列,简单来说,今天我们就是要研究 https://docs.opencv.org/master/examples.html下的 6个文件,看看在最新的OpenCV中,它们是如何发挥作用的. ...

  2. GuavaCache简介（一）

    原文地址 http://blog.csdn.net/guozebo/article/details/51590517 前言 在多线程高并发场景中往往是离不开cache的,需要根据不同的应用场景来需要选 ...

  3. C语言数据结构-栈的实现-初始化、销毁、长度、取栈顶元素、查找、入栈、出栈、显示操作

    1.数据结构-栈的实现-C语言 #define MAXSIZE 100 //栈的存储结构 typedef struct { int* base; //栈底指针 int* top; //栈顶指针 int ...

  4. linux模式切换，进程切换

    内核态和用户态的切换: 用户态到内核态的转换:1.进行系统调用,2.异步中断,3.外部硬件中断 检查特权级别的变化:当异常发生在用户态,而异常处理函数则必须运行在内核态,则此时必须调用内核态的堆栈(系 ...

  5. OpenCV&Qt学习之四——OpenCV 实现人脸检测与相关知识整理

    开发配置 OpenCV的例程中已经带有了人脸检测的例程,位置在:OpenCV\samples\facedetect.cpp文件,OpenCV的安装与这个例子的测试可以参考我之前的博文Linux 下编译 ...

  6. 「洛谷5017」「NOIP2018」摆渡车【DP，经典好题】

    前言 在考场被这个题搞自闭了,那个时候自己是真的太菜了.qwq 现在水平稍微高了一点,就过来切一下这一道\(DP\)经典好题. 附加一个题目链接:[洛谷] 正文 虽然题目非常的简短,但是解法有很多. ...

  7. java 调用本地应用程序 Java打开(.word,.txt,.pdf)文件

    https://blog.csdn.net/lebron3v/article/details/80741000

  8. freemarker 遍历树形菜单

    <ul class="nav sidebar-menu"> <!--Dashboard--> <!-- 定义遍历方法 --> <#macr ...

  9. npm install 安装包报错

    D:\hapi_learn>npm .x.x npm ERR! code ENOSELF npm ERR! Refusing to install package with name " ...

  10. sharepoint_study_10

    描述:想页面添加一段脚本效果如图所示 图示: 代码(脚本编辑器): <div class="index-links"> <a class=" index ...