可随意拖动table表格列来改变列的位置

一款可随意拖动table表格列来改变列的位置，可以拖动表格内的任意列进行自由排序（暂未设置排序记忆功能，可自行添加），个人觉得是比较实用的一个功能，喜欢的童鞋请收下吧。

分类：表单代码 > 表格难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需设置好页面元素的样式，代码如下：

<style type="text/css">
.no-select-text {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
#headTable td {
    border-bottom: 0px;
    cursor: all-scroll;
}
 #mainTable td {
    width: 77px;
    border-top: 0px;
}
#info {
    background:#eee;
    border: 1px solid #eee;
    width:100px;
    height:30px;
    position:absolute;
    top:0;
    left:0;
    display:none;
}
.arrow {
    width: 10px;
    height: 10px;
    position: relative;
    /*display: inline-block;*/
    /*margin: 10px 10px;*/
}

.arrow:before, .arrow:after {
    content: '';
    border-color: transparent;
    border-style: solid;
    position: absolute;
}

.arrow-up:before {
    border: none;
    background-color: red;
    height: 50%;
    width: 30%;
    top: 50%;
    left: 35%;
}

.arrow-up:after {
    left: 0;
    top: -50%;
    border-width: 5px 5px;
    border-bottom-color: red;
}
.arrow-down:before {
    border: none;
    background-color: red;
    height: 50%;
    width: 30%;
    top: 0;
    left: 35%;
}

.arrow-down:after {
    left: 0;
    top: 50%;
    border-width: 5px 5px;
    border-top-color: red;
}
#triangle {
    display:none;
    position:absolute;
    top:0px;
    left:4px;
}
</style>

页面的body部分，用了div容器里嵌套多个table元素的方法，代码如下：

<div id="main">
    <table id="headTable" border="1" cellpadding="0" cellspacing="0" style="width:400px;text-align:center;">
        <tr style="background-color: #E5E5E5">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
    <table id="mainTable" border="1" cellpadding="0" cellspacing="0" style="width:400px;text-align:center;">
        <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td><div style="color:red;">ten<span style="display:none">123</span></div>10</td>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td><div style="color:red;">ten<span style="display:none">123</span></div>10</td>
        </tr>
        <tr>
            <td>61</td>
            <td>71</td>
            <td>81</td>
            <td>91</td>
            <td><div style="color:red;">ten<span style="display:none">123</span></div>101</td>
        </tr>
    </table>
    <div id="info"></div>
    <div id="triangle">
        <div class="arrow arrow-down"></div>
        <div class="arrow arrow-up"></div>
    </div>
</div>

页面的底部，需引入jQuery库和拖动插件，代码如下：

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