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

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

查看演示

下载资源：

18

次 下载资源

下载积分：

20

积分

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

.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;

}

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

1

2

3

4

5

6	7	8	9	ten 123 10
6	7	8	9	ten 123 10
61	71	81	91	ten 123 101

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