<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Table拖拽</title>

    <!--插件：bootstrap-table http://bootstrap-table.wenzhixin.net.cn/  -->

    <!--bootstrap-table扩展bootstrap-table-reorder-rows https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/reorder-rows  -->

    <!--插件：jquery.tablednd.js -->

    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/reorder-rows/bootstrap-table-reorder-rows.css" rel="stylesheet">

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript" src="jquery.tablednd.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.js"></script>

    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#tableId").bootstrapTable({

                reorderableRows: true,

                onReorderRowsDrag: function (table, row) {

                    console.log()

                },

                onReorderRowsDrop: function (table, row) {

                    console.log()

                },

                onReorderRow: function (newData) {

                    console.log()

                }

            });

        });

    </script>

</head>

<body>

    <h2>Drag the table--Neven.Jr Production</h2>

    <table class="bordered" id="tableId">

        <thead>

            <tr>

                <th>#</th>

                <th>IMDB Top  Movies</th>

                <th>Year</th>

                <th>Action</th>

            </tr>

        </thead>

        <tr>

            <td></td>

            <td>The Shawshank Redemption</td>

            <td></td>

            <td>

                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>

                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>

            </td>

        </tr>

        <tr>

            <td></td>

            <td>The Godfather</td>

            <td></td>

            <td>

                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>

                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>

            </td>

        </tr>

        <tr>

            <td></td>

            <td>The Godfather: Part II</td>

            <td></td>

            <td>

                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>

                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>

            </td>

        </tr>

        <tr>

            <td></td>

            <td>The Good, the Bad and the Ugly</td>

            <td></td>

            <td>

                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>

                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>

            </td>

        </tr>

        <tr>

            <td></td>

            <td>Pulp Fiction</td>

            <td></td>

            <td>

                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>

                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>

            </td>

        </tr>

        <tr>

            <td></td>

            <td> Angry Men</td>

            <td></td>

            <td>

                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>

                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>

            </td>

        </tr>

        <tr>

            <td></td>

            <td>Schindler's List</td>

            <td></td>

            <td>

                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>

                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>

            </td>

        </tr>

        <tr>

            <td></td>

            <td>One Flew Over the Cuckoo's Nest</td>

            <td></td>

            <td>

                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>

                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>

            </td>

        </tr>

        <tr>

            <td></td>

            <td>The Dark Knight</td>

            <td></td>

            <td>

                <a href="javascript:void(0);">Mark</a>

                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>

            </td>

        </tr>

        <tr class="nodrop nodrag">

            <td></td>

            <td>The Lord of the Rings: The Return of the King</td>

            <td></td>

            <td>

                <a href="javascript:void(0);"><i class="icon-bookmark"></i>Mark</a>

                <a href="javascript:void(0);"><i class="icon-edit">Detail</i></a>

            </td>

        </tr>

    </table>

    <br>

</body>

</html>

https://files.cnblogs.com/files/xuguanghui/table%E8%A1%8C%E6%8B%96%E6%8B%BD.rar

或者使用sorttable插件： http://jqueryui.com/sortable/

table行拖拽的更多相关文章

  1. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  2. Jquery easyui treegrid实现树形表格的行拖拽

    前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自 ...

  3. jqGrid之treeGrid及行拖拽

    单纯的做个小记录 今天做功能用到了jqGrid里面的treeGrid,遇到几个问题,这里做下记录 treeGrid 树表格的应用在官网给出了很直白的例子: 1.http://blog.mn886.ne ...

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

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

  5. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  6. Dev GridView行拖拽

    http://blog.csdn.net/keyrainie/article/details/8513802 http://www.cnblogs.com/qq4004229/archive/2012 ...

  7. devpress 的gridview 控件的行拖拽 z

    首先,添加引用:using DevExpress.XtraGrid.Views.Grid.ViewInfo;               gridControl1.AllowDrop = true; ...

  8. ListView 多行拖拽排序

    核心代码:修改ListView的属性,及绑定事件 // 初始化listView1. private void InitializeListView() { listView1.AllowDrop = ...

  9. jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）

    现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...

随机推荐

  1. YQCB冲刺周第二天

    YQCB冲刺周第二天 1.实现用户记账的功能 2.实现用户头像的设置 3.实现个人设置的功能 遇到的问题: 记账的分类,数据库存取图片,页面跳转+超链接的使用 团队讨论的照片:             ...

  2. [转]精选！15个必备的VSCode插件

    Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱. 就像大多数 IDE 一样,VSCode 也有一个扩展和主题市 ...

  3. lintcode-427-生成括号

    427-生成括号 给定 n 对括号,请写一个函数以将其生成新的括号组合,并返回所有组合结果. 样例 给定 n = 3, 可生成的组合如下: "((()))", "(()( ...

  4. lintcode-419-罗马数字转整数

    419-罗马数字转整数 给定一个罗马数字,将其转换成整数. 返回的结果要求在1到3999的范围内. 说明 什么是 罗马数字? https://en.wikipedia.org/wiki/Roman_n ...

  5. PAT L1 - 056 猜数字

    https://pintia.cn/problem-sets/994805046380707840/problems/994805074646122496 一群人坐在一起,每人猜一个 100 以内的数 ...

  6. 用putty玩linux的时候由于以前用window 习惯写完东西按一下ctrl+s 保存

    问题描述:用putty玩linux的时候由于以前用window 习惯写完东西按一下ctrl+s 保存,但是在putty一按下就不能再输入了.后来查找到:ctrl+s 是putty的一个命令大概是这样子 ...

  7. linux自启动、定时启动脚本

    linux开机自启动 想让一个程序.脚本开机自启动,可以在/etc/rc.d目录下面找到rc.local文件,编辑该文件,在尾部加上需要运行的命令即可. 如: #cd /etc/rc.d #sudo ...

  8. 剖析Vue原理&实现双向绑定MVVM-2

    vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...

  9. Python基础数据类型题

    Python基础数据类型 题考试时间:三个小时 满分100分(80分以上包含80分及格)1,简述变量命名规范(3分) 1.必须是字母,数字,下划线的任意组合. 2.不能是数字开头 3.不能是pytho ...

  10. 【刷题】BZOJ 2434 [Noi2011]阿狸的打字机

    Description 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母. 经阿狸研究发现,这个打字机是这样工作的 ...