js 表格拖拽

tengteng721

浏览: 18016 次
性别:
来自: 上海

最近访客更多访客>>

long64783977

叶落啼莺

will_zhuzhu2

sefeiguo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

中国移动

前几天看到网上一个table拖拽的例子，自己改了改，改成自己需要的了
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>拖动</TITLE>
<STYLE>
td{width:20%;height:20px;cursor:default;}
div{font-size:13px;}..
table{border:1px solid black;font-size:13px;}
</STYLE>
<script>
var dragedTable_x0,dragedTable_y0,dragedTable_x1,dragedTable_y1;
var dragedTable_movable = false;
var dragedTable_preCell = null;
var dragedTable_normalColor = null;
//起始单元格的颜色
var dragedTable_preColor = "lavender";
//目标单元格的颜色
var dragedTable_endColor = "#FFCCFF";
//移动div id
var dragedTable_movedDiv = "dragedTable_movedDiv";
var dragedTable_tableId = "";

//设置拖动div
function DragedTable(tableId){
dragedTable_tableId=tableId;
var oTempDiv = document.createElement("div");
oTempDiv.id = dragedTable_movedDiv;
oTempDiv.onselectstart = function(){return false};
oTempDiv.style.cursor = "hand";
oTempDiv.style.position = "absolute";
oTempDiv.style.border = "1px solid black";
oTempDiv.style.backgroundColor = dragedTable_endColor;
oTempDiv.style.display = "none";
document.body.appendChild(oTempDiv);
document.all(tableId).onmousedown = showDiv;
}

//得到控件的绝对位置
function getPos(cell){
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent){
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}

//显示图层
function showDiv(){
var obj = event.srcElement;
var pos = new Array();
//获取过度图层
var oDiv = document.all(dragedTable_movedDiv);
if(obj.tagName.toLowerCase() == "td"){
obj.style.cursor = "hand";
pos = getPos(obj);
//计算中间过度层位置，赋值
oDiv.style.width = obj.offsetWidth;
oDiv.style.height = obj.offsetHeight;
oDiv.style.top = pos[0];
oDiv.style.left = pos[1];
oDiv.innerHTML = obj.innerHTML;
oDiv.style.display = "";
dragedTable_x0 = pos[1];
dragedTable_y0 = pos[0];
dragedTable_x1 = event.clientX;
dragedTable_y1 = event.clientY;
//记住原td
dragedTable_normalColor = obj.style.backgroundColor;
obj.style.backgroundColor = dragedTable_preColor;
dragedTable_preCell = obj;
dragedTable_movable = true;
}
}

document.onmousemove = function(){
dragDiv();
}

function dragDiv(){
if(dragedTable_movable){
//document.write(dragedTable_movedDiv);
var oDiv = document.all(dragedTable_movedDiv);
var pos = new Array();
oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0;
oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0;
//targetTableId 为要放置的表的id
var oTable = document.all("targetTableId");
//alert(oTable.cells.length);
for(var i=0; i<oTable.cells.length;){
if(oTable.cells[i].tagName.toLowerCase() == "td"){
pos = getPos(oTable.cells[i]);
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight){
if(oTable.cells[i] != dragedTable_preCell)
oTable.cells[i].style.backgroundColor = dragedTable_endColor;
}
else{
if(oTable.cells[i] != dragedTable_preCell)
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
}
}
//控制得到第几列的cell，此为得到第一列的cell
i=i+2;
}
}
}

function hideDiv(){
if(dragedTable_movable){
var oTable = document.all("targetTableId");
var pos = new Array();
if(dragedTable_preCell != null){
for(var i=0; i<oTable.cells.length;){
//alert(i)
pos = getPos(oTable.cells[i]);
//计算鼠标位置，是否在某个单元格的范围之内
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth
&& event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight){
if(oTable.cells[i].tagName.toLowerCase() == "td"){
//交换文本
dragedTable_preCell.innerHTML = oTable.cells[i].innerHTML;
oTable.cells[i].innerHTML = document.all(dragedTable_movedDiv).innerHTML;
//清除原单元格和目标单元格的样式
dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.cursor = "";
dragedTable_preCell.style.cursor = "";
dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
}
}
i=i+2;
}
}
dragedTable_movable = false;
//清除提示图层
document.all(dragedTable_movedDiv).style.display = "none";
}
}

document.onmouseup = function(){
hideDiv();
var oTable = document.all(dragedTable_tableId);
for(var i=0; i<oTable.cells.length; i++)
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
}

</script>
<script>
function init()
{
//注册可拖动表格
new DragedTable("tableId");
}
</script>
</HEAD>
<BODY onload="init()">
<TABLE width="90%" align="center">
<TR>
<TD width ="40%" >
<TABLE id="tableId" width="100%" align="center" border="1px">
<TR>
<TD>中国</TD>
</TR>
<TR>
<TD>美国</TD>
</TR>
<TR>
<TD>英国</TD>
</TR>
<TR>
<TD>加拿大</TD>
</TR>
</TABLE>
</TD>

<TD width="60%" >
<TABLE id="targetTableId" width="100%" align="center" border="1px">
<TR>
<TD width="50%"></TD>
<TD width="50%">CHINA</TD>
</TR>
<TR>
<TD width="50%"></TD>
<TD width="50%">USA</TD>
</TR>
<TR>
<TD width="50%"></TD>
<TD width="50%">EN</TD>
</TR>
<TR>
<TD width="50%"></TD>
<TD width="50%">CANADA</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

分享到：