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

话不多说 ，我在网上找了一些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. ubuntu - 14.04，安装CDT（Eclipse开发C++和C的插件）

    我已经安装完Eclipse了,我想把CDT加入到我的Eclipse里面. 一,下载CDT:我下载的是64位的CDT,下载地址:http://eclipse.bluemix.net/packages/m ...

  2. IOS中录音后再播放声音太小问题解决

    1.AVAudioSessionCategory说明 1.1 AVAudioSessionCategoryAmbient 或 kAudioSessionCategory_AmbientSound 用于 ...

  3. 转载 【Linux】Linux中常用操作命令

    [Linux]Linux中常用操作命令     https://www.cnblogs.com/laov/p/3541414.html#vim   Linux简介及Ubuntu安装 常见指令 系统管理 ...

  4. 为asp.net core 自定义路由动态修改

    根据IApplicationModelConvention 接口 实现相应的方法 /// <summary> /// 定义个类RouteConvention,private 来实现 IAp ...

  5. iOS 上的相机捕捉 swift

    第一台 iPhone 问世就装有相机.在第一个 SKDs 版本中,在 app 里面整合相机的唯一方法就是使用 UIImagePickerController,但到了 iOS 4,发布了更灵活的 AVF ...

  6. __weak 和 __strong 还有Autorelease的用法

    使用容器的block版本的枚举器时,内部会自动添加一个AutoreleasePool: Autorelease对象是在当前的runloop迭代结束时释放的,而它能够释放的原因是系统在每个runloop ...

  7. Java内存区域与内存溢出异常---对象的内存布局和对象的访问定位

    对象的内存布局   在HotSpot虚拟机中,对象在内存中的存储布局可以划分为三个区域:对象头,实例数据,对齐填充.   对象头包括两部分信息:第一部分用于存储对象自身的运行时数据,如哈希码,GC分代 ...

  8. matplotlib学习笔记（三）

    柱状图 柱状图用其每根柱子的长度表示值的大小,它们通常用来比较两组或多组值.下面的程序从文件中读入中国人口的年龄分布数据,并使用柱状图比较男性和女性的年龄分布. import numpy as np ...

  9. BZOJ 3631 松鼠的新家 树上差分

    我猜会有智障说直接链剖+线段树…(希望没有) From RYC's 课件 然鹅我并不反对树剖...我是智障...QAQ 好吧还是树上差分:设 a[i]=u.a[i+1]=v ++w[u],++w[v] ...

  10. jenkins插件之火线扫描（静态代码扫描）

    参考网址: https://blog.csdn.net/oggboy/article/details/78646622