对表格进行拖拽来交换单元格的数据,呵呵,拷贝下来试试看吧 : )
<!-- 欢迎转载,请保留作者及其出处,谢谢 --> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>拖动</TITLE> <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> <script language="javascript"> /************************************ dragedTableData.js *******************************/ /************************************ 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 结束 *******************************/ /************************************ dragedTableData.js 结束 *******************************/ </script> <script language="javascript"> function init() { //注册可拖拽表格 new DragedTable("tableId"); } </script> </HEAD> <BODY oncontextmenu="return false;" onload="init()"> <TABLE id="tableId" width="70%" align="center" cellpadding="0" cellspacing="0"> <TR> <TH colspan="4" style="">拖动交换单元格内容</TH> </TR> <TR> <TD>Java</TD> <TD>Java One </TD> <TD>JBuilder</TD> <TD>Stuts</TD> </TR> <TR> <TD>C++</TD> <TD>Visual Studio</TD> <TD>Office</TD> <TD>Windows</TD> </TR> <TR> <TD>PhotoShop</TD> <TD>Java</TD> <TD>Illustrator</TD> <TD>PageMaker</TD> </TR> <TR> <TD>Cartoon</TD> <TD>Telephone</TD> <TD>China</TD> <TD>USA</TD> </TR> <TR> <TD>Java</TD> <TD>Java One </TD> <TD>JBuilder</TD> <TD>Stuts</TD> </TR> <TR> <TD>C++</TD> <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> <TD>USA</TD> </TR> </TABLE> </BODY> </HTML>

|