信鸽网

js 表格拖拽效果实例代码 (IE only)

  作者：bea

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=gb2312" />
<title>Table Test (I.E. Only)</title>

<script type="text/javascript">
/*得到表格列*/
function getCols(srcCellIndex,obj) {
obj = typeof obj === 'string' ? document.getElementById(obj) : obj;
var s = '';

s += '<tr><th style="font-size:12px;text-align:center;font-weight:bold;line-height: 23px;'
s += 'border: 1px solid #77ABF2;height: 25px;white-space: nowrap;background-color:#AEAEAE;">'
s += obj.rows[0].cells[srcCellIndex].innerHTML + '</th></tr>';

for(var i = 1;i < obj.rows.length;i++) {
s += '<tr><td>' + obj.rows[i].cells[srcCellIndex].innerHTML + '</td></tr>';
}
return s;
}
/*得到表格*/
function getTable(obj) {
while(obj.tagName.toLowerCase() != 'table') {
obj = obj.parentElement;
}
return obj;
}

/*交换列*/
function swapCol(srcCellIndex,destCellIndex,obj) {
obj = typeof obj === 'string' ? document.getElementById(obj) : obj;
for(var i = 0;i < obj.rows.length;i++) {
obj.rows[i].cells[srcCellIndex].swapNode(obj.rows[i].cells[destCellIndex]);
}
}

function createDiv() {
var div = document.createElement('div');
div.style.cssText += 'border:1px dashed #003F87;background:#FFFFFF;color:#DC8331;overflow:hidden;';
div.style.cssText += 'zIndex:10000;position:absolute;filter:Alpha(opacity=70);font-size:12px;';
return div;
}

/*得到事件促发的th元素*/
function getThEl() {
var el = document.elementFromPoint(event.x,event.y);
if(el.tagName.toLowerCase() == 'th') {
return el;
}
return;
}

/*得到对象的位置*/
function getObjPos(obj) {
var x = y = 0;
if(obj.getBoundingClientRect) {
var box = obj.getBoundingClientRect();
x = box.left + Math.max(document.documentElement.scrollLeft,document.body.scrollLeft) - document.documentElement.clientLeft;
y = box.top + Math.max(document.documentElement.scrollTop,document.body.scrollTop) - document.documentElement.clientTop;
} else {
while(obj != document.body) {
x += obj.offsetLeft;
y += obj.offsetTop;
obj = obj.offsetParent
}
}
return { 'x': x,'y': y };
}

/*得到鼠标的位置*/
function getCurPos() {
e = event || window.event;
return e.pageX ? { x: e.pageX,y: e.pageY} : { x: e.clientX + document.documentElement.scrollLeft -
document.documentElement.clientLeft,y: e.clientY + document.documentElement.scrollTop -
document.documentElement.clientTop};
}

function startSwap() {
var startEl = getThEl();
if(typeof startEl == 'undefined')
return;
var div = createDiv();
document.body.appendChild(div);
div.style.width = startEl.clientWidth;
div.style.height = getTable(startEl).clientHeight;
div.innerHTML = '<table class="Shadow">' + getCols(startEl.cellIndex,getTable(startEl)) + '</table>';
div.style.left = getObjPos(startEl).x + 'px';
div.style.top = getObjPos(startEl).y + 'px';
div.style.display = 'block';

var isDragable = true;
var curX = getCurPos().x;
var curY = getCurPos().y;
var objX = getObjPos(div).x;
var objY = getObjPos(div).y;

div.onmousemove = function() {
if(isDragable) {
div.style.cssText += 'cursor:move;';
div.style.left = getCurPos().x - curX + objX + 'px';
div.style.top = getCurPos().y - curY + objY + 'px';
}
}

div.onmouseup = function() {
isDragable = false;
div.style.display = 'none';
var endEl = getThEl();
if(typeof endEl === 'undefined') {
return;
}
var srcCellIndex = startEl.cellIndex;
var destCellIndex = endEl.cellIndex;
swapCol(srcCellIndex,destCellIndex,getTable(endEl));
}
/*鼠标移除层，事件取消*/
div.onmouseout = function() {
isDragable = false;
div.style.display = 'none';
return;
}
}


</script>

<style type="text/css">
body
{
overflow: hidden;
}
.Shadow
{
color: #FC8331;
width: 100%;
padding: 3px;
font-family: Arial, "宋体";
font-size: 12px;
font-weight: normal;
line-height: 22px;
border-collapse: collapse;
border-right: 1px solid #0000;
border-top: 1px solid #0000;
border-left: 1px solid #0000;
border-bottom: 1px solid #0000;
}
.Grid
{
background-color: #ffffff;
padding: 3px;
font-family: Arial, "宋体";
font-size: 12px;
font-weight: normal;
line-height: 22px;
color: #494949;
text-decoration: none;
border-collapse: collapse;
border-right: 1px solid #2A8CBF;
border-top: 1px solid #2A8CBF;
border-left: 1px solid #2A8CBF;
border-bottom: 1px solid #2A8CBF;
}
.GridHeader
{
font-family: Arial, "宋体";
font-size: 12px;
font-weight: bold;
line-height: 23px;
border: 1px solid #77ABF2;
height: 25px;
text-decoration: none;
text-align: center;
white-space: nowrap;
color: #000000;
}
</style>
</head>
<body>
<table id="table" width="90%" border="1" class="Grid">
<thead class="GridHeader">
<tr bgcolor="cccccc">
<th>
<span>姓名</span>
</th>
<th>
<span>性别</span>
</th>
<th>
<span>年龄</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
周周
</td>
<td>
F
</td>
<td>
20
</td>
</tr>
<tr>
<td>
达达
</td>
<td>
M
</td>
<td>
21
</td>
</tr>
<tr>
<td>
黄宏
</td>
<td>
M
</td>
<td>
12
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<script type="text/javascript">
(function() {
var ths = document.getElementsByTagName('th');
for(var i = 0;i < ths.length;i++) {
ths[i].attachEvent('onmousedown',startSwap);
}
})();
</script>

</body>
</html>





[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]



有用  |  无用

猜你喜欢

您可能感兴趣的文章: