js拖拽单元格内容

淡淡的烟草味﹌ 2021-06-24 13:58 483阅读 0赞

<HTML>  
<HEAD>  
<META http-equiv="Content-Type" content="text/html; charset=gb2312">  
<TITLE>JS动态拖动表格实现</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 yzh 2002.4.12  
 \* 可以实现表格内容的内部拖动  
 \* 确保中间过度层的存在，id为指定  
 \* 请大家引用时保留这段作者声明，此代码为开源代码；使用不受限制，欢迎大家采用本人所写JS动态拖动表格实现代码。  
 \*/  
   
/\*--------全局变量-----------\*/  
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;  
                \}  
            \}  
        \}             
    \}  
\}

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 οncοntextmenu="return false;" οnlοad="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>