drag.js###
var h = $('#headTable th').height();
$('.arrow-up').css({
'margin-top': h
});
var flag = false;
$('#headTable th').unbind('mousedown');
$('#headTable th').mousedown(function() {
let startIndex = $(this).index();
let endIndex;
flag = true;
$('#info').css({
display: 'block'
});
//$('#triangle').css('display', 'block');
$('body').addClass('no-select-text');
$('#info').html($(this).html());
$(document).mousemove(function(e) {
if (flag) {
var e = e || window.event;
var x = e.clientX + 5 + 'px';
var y = e.clientY + 5 + 'px';
$('#info').css({
left: x,
top: y
});
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
});
$('table td,th').mouseenter(function() {
endIndex = $(this).index();
if (endIndex == startIndex) {
$('#triangle').css('display', 'none');
} else {
$('#triangle').css('display', 'block');
}
var offsetW = 0;
var preTd = $(this).prevAll();
$.each(preTd, function(id, item) {
offsetW += item.offsetWidth;
});
if (endIndex > startIndex) {
offsetW += $(this)['0'].offsetWidth;
}
$('#triangle').css({
top: 0,
left: offsetW + 4
});
if (endIndex !== startIndex) {
changes();
}
});
function changes() {
if (endIndex < startIndex) {
$('#mainTable tr').each(function(i) {
$('#mainTable tr:eq(' + i + ') td:eq(' + endIndex + ')').before(
$('#mainTable tr:eq(' + i + ') td:eq(' + startIndex + ')').clone(true)
);
$(
'#mainTable tr:eq(' + i + ') td:eq(' + (startIndex + 1) + ')'
).remove();
$('#headTable tr:eq(' + i + ') th:eq(' + endIndex + ')').before(
$('#headTable tr:eq(' + i + ') th:eq(' + startIndex + ')').clone(true)
);
$(
'#headTable tr:eq(' + i + ') th:eq(' + (startIndex + 1) + ')'
).remove();
});
} else if (endIndex > startIndex) {
$('#mainTable tr').each(function(i) {
$('#mainTable tr:eq(' + i + ') td:eq(' + endIndex + ')').after(
$('#mainTable tr:eq(' + i + ') td:eq(' + startIndex + ')').clone(true)
);
$('#mainTable tr:eq(' + i + ') td:eq(' + startIndex + ')').remove();
$('#headTable tr:eq(' + i + ') th:eq(' + endIndex + ')').after(
$('#headTable tr:eq(' + i + ') th:eq(' + startIndex + ')').clone(true)
);
$('#headTable tr:eq(' + i + ') th:eq(' + startIndex + ')').remove();
});
}
startIndex = endIndex;
}
$(document).mouseup(function() {
flag = false;
$('#triangle').css('display', 'none');
$('#info').css({
display: 'none'
});
$(document).unbind('mousemove');
$(document).unbind('mouseup');
$('table td,th').unbind('mouseenter');
});
});
index.html###
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>可随意拖动table表格列来改变列的位置</title>
<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 {
77px;
border-top: 0px;
}
#info {
background: #eee;
border: 1px solid #eee;
100px;
height: 30px;
position: absolute;
top: 0;
left: 0;
display: none;
}
.arrow {
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%;
30%;
top: 50%;
left: 35%;
}
.arrow-up:after {
left: 0;
top: -50%;
border- 5px 5px;
border-bottom-color: red;
}
.arrow-down:before {
border: none;
background-color: red;
height: 50%;
30%;
top: 0;
left: 35%;
}
.arrow-down:after {
left: 0;
top: 50%;
border- 5px 5px;
border-top-color: red;
}
#triangle {
display: none;
position: absolute;
top: 0px;
left: 4px;
}
</style>
</head>
<body class="no-select-text" style="">
<div id="main">
<!-- <table
border="1"
cellpadding="0"
cellspacing="0"
style="400px;text-align:center;"
>
<tbody>
<tr style="background-color: #E5E5E5">
<td>5</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>1</td>
</tr>
</tbody>
</table> -->
<table
id="mainTable"
border="1"
cellpadding="0"
cellspacing="0"
style="400px;text-align:center;"
>
<thead id="headTable">
<tr>
<th>5</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="color:red;">
ten<span style="display:none">123</span>
</div>
10
</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>6</td>
</tr>
<tr>
<td>
<div style="color:red;">
ten<span style="display:none">123</span>
</div>
10
</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>6</td>
</tr>
<tr>
<td>
<div style="color:red;">
ten<span style="display:none">123</span>
</div>
101
</td>
<td>71</td>
<td>81</td>
<td>91</td>
<td>61</td>
</tr>
</tbody>
</table>
<div id="info" style="display: none; left: 301px; top: 26px;">4</div>
<div id="triangle" style="display: none; top: 0px; left: 255px;">
<div class="arrow arrow-down"></div>
<div class="arrow arrow-up" style="margin-top: 22px;"></div>
</div>
</div>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./drag.js"></script>
</body>
</html>