一款可随意拖动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库和拖动插件,代码如下: