拖动交换单元格内容

最新推荐文章于 2021-08-13 13:08:46 发布

googolplex

最新推荐文章于 2021-08-13 13:08:46 发布

阅读量2.1k

点赞数

分类专栏： HTML开发备忘文章标签： function jbuilder javascript table office windows

HTML开发备忘专栏收录该内容

15 篇文章

订阅专栏

<HTML>

<HEAD>

<STYLE>

td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}

div{font-size:13px;}

th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC}

table{border:1px solid black;font-size:13px;}

</STYLE>

/************************************ dragedTableData.js *******************************/

* created by LxcJie 2004.4.12

* 可以实现表格内容的内部拖动

* 确保中间过度层的存在，id为指定

/*--------全局变量-----------*/

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

var dragedTable_movedDiv = "dragedTable_movedDiv";

var dragedTable_tableId = "";

/*--------全局变量-----------*/

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;

}

function dragDiv()

{

if(dragedTable_movable)

{

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;

var oTable = document.all(dragedTable_tableId);

for(var i=0; i<oTable.cells.length; i++)

{

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;

}

function hideDiv()

{

if(dragedTable_movable)

{

var oTable = document.all(dragedTable_tableId);

var pos = new Array();

if(dragedTable_preCell != null)

{

for(var i=0; i<oTable.cells.length; 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;

}

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;

}

document.onmousemove = function()

{

dragDiv();

}

/************************************ dragedTableData.js 结束 *******************************/

</script>

function init()

{

//注册可拖拽表格

new DragedTable("tableId");

}

</script>

</HEAD>

<TR>

<TH colspan="4" style="">拖动交换单元格内容</TH>

</TR>

<TR>

<TD>JBuilder</TD>

<TD>Stuts</TD>

</TR>

<TR>

<TD>Visual Studio</TD>

<TD>Office</TD>

<TD>Windows</TD>

</TR>

<TR>

<TD>PhotoShop</TD>

<TD>Illustrator</TD>

<TD>PageMaker</TD>

</TR>

<TR>

<TD>Cartoon</TD>

<TD>Telephone</TD>

<TD>China</TD>

</TR>

<TR>

<TD>JBuilder</TD>

<TD>Stuts</TD>

</TR>

<TR>

<TD>Visual Studio</TD>

<TD>Office</TD>

<TD>Windows</TD>

</TR>

<TR>

<TD>PhotoShop</TD>

<TD>Flash</TD>

<TD>Illustrator</TD>

<TD>PageMaker</TD>

</TR>

<TR>

<TD>Cartoon</TD>

<TD>Telephone</TD>

<TD>China</TD>

</TR>

</TABLE>

</BODY>

</HTML>