表格列的拖動

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
    <HEAD>
        <title>DataGrid拖動的例子</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
        <META http-equiv="Content-Type" content="text/html; charset=gb2313">
        <meta name="CODE_LANGUAGE" Content="VB">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    </HEAD>
    <body>

        <form name="idbSample" method="post" action="DropDataGrid.aspx" id="idbSample" class="SubHeading">
            <table cellspacing="0" cellpadding="3" rules="all" dragcolor="gray" slcolor="#ffffcc" hlcolor="#BEC5DE"
                bordercolor="#000099" border="1" id="MyTable" style="border-color:#000099;width:100%;border-collapse:collapse;BEHAVIOR:url(tableAct.htc)">
                <tr align="Center" style="background-color:#FFCC66;font-weight:bold;">
                    <td Width="200">Email</td>
                    <td Width="200">FirstName</td>
                    <td Width="200">LastName</td>
                    <td Width="200">Manager</td>
                </tr>
                 <tr>
                    <td>[email protected]</td>
                    <td>Lover</td>
                    <td>Net</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>[email protected]</td>
                    <td>NET開發者園地</td>
                    <td>Net</td>
                    <td>0</td>
                </tr>
                 <tr>
                    <td>[email protected]</td>
                    <td>XML開發者園地</td>
                    <td>Net</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>[email protected]</td>
                    <td>憲會</td>
                    <td>孟</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>[email protected]</td>
                    <td>E章</td>
                    <td>孟子</td>
                    <td>0</td>
                </tr>
            </table>
        </form>
    </body>
</HTML>

mytable.htc：

<public:event name="onrowselect" ID=rowSelect />
<public:property name="hlColor" />
<public:property name="slColor" />
<public:property name='dragColor' />

<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" />
<public:attach     event=oncontentready onevent="init();" />

<script language=jscript>
var currRow = -1;
var selRow = -1;

if (element.tagName == 'TABLE')
{
    element.attachEvent('onmouseover', onMouseOver);
    element.attachEvent('onmouseout', onMouseOut);
    element.attachEvent('onclick', onClick);
}
else
{
    alert("錯誤");
}

function cleanup()
{
    hilite(-1);

    element.detachEvent('onmouseover', onMouseOver);
    element.detachEvent('onmouseout', onMouseOut);
    element.detachEvent('onclick', onClick);
}

function onClick()
{
    srcElem = window.event.srcElement;
    while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
        srcElem = srcElem.parentElement;

    if(srcElem.tagName != "TR") return;

    if(srcElem.rowIndex == 0 ) return;

    if (selRow != -1) selRow.runtimeStyle.backgroundColor = '';

    srcElem.runtimeStyle.backgroundColor = slColor;
    selRow = srcElem;

    var oEvent     = createEventObject();
    oEvent.selected = selRow;
    rowSelect.fire(oEvent);
}

//找到所在的行，然後決定是否改變背景顏色
function onMouseOver()
{
    srcElem = window.event.srcElement;
    //crawl up to find the row
    while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
        srcElem = srcElem.parentElement;

    if(srcElem.tagName != "TR") return;

    if (srcElem.rowIndex > 0)
        hilite(srcElem);
    else
        hilite(-1);

}

function onMouseOut()
{
    hilite(-1, -1);
}

function hilite(newRow)
{

    if (hlColor != null )
    {
        if (currRow != -1 && currRow!=selRow)
        {
            currRow.runtimeStyle.backgroundColor = '';
        }

        if (newRow != -1 && newRow!=selRow)
        {
            newRow.runtimeStyle.backgroundColor = hlColor;
        }
    }
    currRow = newRow;
}

var tbody=null;
var theadrow=null;
var colCount = null;

var reverse = false;
var lastclick = -1;

var arrHitTest = new Array();
var bDragMode = false;
var objDragItem;

var iArrayHit = false;
var rowCount  = 0 ;

function init() {

    tbody = element.tBodies(0);

    if (!tbody) return;

      rowCount = tbody.children.length;

    var l, clickCell;
    var cx=0;
    var cy=0;
    var c;

    for (var i=0; i<rowCount; i++)
    {
    /*
        l=document.createElement("IMG");
        l.src="dude07232001blank.gif";
        l.id="srtImg";
        l.width=25;
        l.height=11;
*/
        //clickCell = theadrow.children[i];
        // 第一列中單元格
        clickCell = element.childNodes[0].childNodes[i].firstChild ;
        clickCell.runtimeStyle.cursor = "hand";
        clickCell.selectIndex = i;
//        clickCell.insertAdjacentElement("beforeEnd", l)
        //clickCell.attachEvent("onclick", doClick);

        arrHitTest[i] = new Array();

        c = clickCell.offsetParent;

       if(cx == 0 && cy == 0 )
       {
            while (c.offsetParent != null) {
                  cy += c.offsetTop;
                  cx += c.offsetLeft;
                  c = c.offsetParent;
        }
    }

//arrHitTest 一維存儲了行號
//二維存儲了 x ,y ,單元格對象，單元格下邊界
    arrHitTest[i][0] = cx + clickCell.offsetLeft;
    arrHitTest[i][1] = cy + clickCell.offsetTop;
    arrHitTest[i][2] = clickCell;
    //arrHitTest[i][3] = cx + clickCell.offsetLeft + eval(clickCell.width);
    arrHitTest[i][3] = cy + clickCell.offsetTop + eval(clickCell.height);

    clickCell.attachEvent("onmousedown",onMouseDown);
    }

//註釋
  defaultTitleColor = tbody.childNodes[0].firstChild.currentStyle.backgroundColor;

  element.document.attachEvent("onmousemove",onMouseMove);
  element.document.attachEvent("onmouseup",onMouseUp);
  element.document.attachEvent("onselectstart",onSelect);
}


function InitHeader()
{

  var cx=0;
  var cy=0;
  var c;

  for (i=0; i<colCount ; i++) {

    alert(theadrow.tagName) ;

    var clickCell = theadrow.children[i];
    clickCell.selectIndex = i;
    c = clickCell.offsetParent;

    if(cx == 0 && cy == 0 )
    {
        while (c.offsetParent != null) {
                  cy += c.offsetTop;
                  cx += c.offsetLeft;
                  c = c.offsetParent;
        }
    }

    arrHitTest[i][0] = cx + clickCell.offsetLeft;
    arrHitTest[i][1] = cy + clickCell.offsetTop;
    arrHitTest[i][2] = clickCell;
    arrHitTest[i][3] = cx + clickCell.offsetLeft + eval(clickCell.width);

  }
}

function onSelect()
{
    return false;
}

//執行替換變色的行就是要移動到的行。切記！
function ChangeHeader(iChange)
{
    for(var y = 0; y < arrHitTest.length; y++)
    {
    if (arrHitTest[y][2].currentStyle.backgroundColor == dragColor)
        arrHitTest[y][2].style.backgroundColor = defaultTitleColor;
    }

    if(iChange == "-1") return;

    arrHitTest[iChange][2].style.backgroundColor = dragColor;
}

//替換的關鍵代碼
function onMouseUp(e)
{
    if(!bDragMode)    return;
    bDragMode = false;

    var iSelected = objDragItem.selectIndex;

    objDragItem.removeNode(true);
    objDragItem = null;

     ChangeHeader(-1);

    //iSelected確定了正確選擇的行號從零開始
     if( (iArrayHit - 1) < 0 || iSelected < 0) return;

    //從iSelected 複製到 (iArrayHit - 1)
    CopyRow(iSelected, (iArrayHit - 1) );

    iSelected = 0;
    iArrayHit = -1;
}

//移動鼠標的時候建立一個div暫時保存單元格的內容
function onMouseDown(e)
{
    bDragMode    = true;
    var src = e.srcElement;
    var c = e.srcElement;

    //尋找最近的TD節點
    while (src.tagName != "TD")
        src = src.parentElement;

    objDragItem = document.createElement("DIV");
    objDragItem.innerHTML        = src.innerHTML;
    objDragItem.style.height    = src.currentStyle.height;
    objDragItem.style.width     = src.currentStyle.width;
    objDragItem.style.background     = src.currentStyle.backgroundColor;
    objDragItem.style.fontColor    = src.currentStyle.fontColor;
    objDragItem.style.position     = "absolute";
    objDragItem.selectIndex        = src.selectIndex;
    while (c.offsetParent != null)
        {
        objDragItem.style.y += c.offsetTop;
        objDragItem.style.x += c.offsetLeft;
        c = c.offsetParent;
    }
     objDragItem.style.borderStyle    = "outset";
    objDragItem.style.display    = "none";
    src.insertBefore(objDragItem);
}

function onMouseMove(e)
{

    if(!bDragMode || !objDragItem) return;

     var midWObj = objDragItem.style.posWidth / 2;
    //var midWObj = objDragItem.style.posHeight / 2;
    var midHObj = 12;

    var intTop = e.clientY + element.document.body.scrollTop;
    var intLeft = e.clientX + element.document.body.scrollLeft;

    var cx=0,cy=0;
    var elCurrent = objDragItem.offsetParent;
               while (elCurrent.offsetParent != null) {
                  cx += elCurrent.offsetTop;
                  cy += elCurrent.offsetLeft;
                  elCurrent = elCurrent.offsetParent;
               }

      objDragItem.style.pixelTop  = intTop  - cx - midHObj;
      objDragItem.style.pixelLeft = intLeft - cy - midWObj;

    if(objDragItem.style.display == "none") objDragItem.style.display = "";

    iArrayHit = CheckHit(intTop , intLeft , e);

    e.cancelBubble = false;
    e.returnValue = false;
}

//檢查移動到了哪一行
function CheckHit(y,x,e)
{
    midWObj = objDragItem.style.posWidth / 2;
    midHObj = 12;

    for(var i=0; i < rowCount; i++)
    {
        if( (y) > (arrHitTest[i][0]) && (y) < (arrHitTest[i][3] )) //+ 100))
        {
            ChangeHeader(i);
            return i + 1;
        }
    }

    return -1;
}

//複製內容
function CopyRow(from, to)
{
    for(var i =0 ; i< arrHitTest.length ; i++ )
    {
//        alert(arrHitTest[i][3]) ;
    }

    // alert(from + "__"  + to) ;

    if(from == to) return;

    var origfrom = from;
    var origto = to;
    var iDiff = 0;

    if( from > to )
    {
        iDiff = from - to;

        var saveObj     = tbody.childNodes[from].firstChild.innerHTML;
        var saveWidth     = tbody.childNodes[from].firstChild.width;

        for(var i = 0 ; i < iDiff; i++)
        {
             tbody.childNodes[from].firstChild.innerHTML =  tbody.childNodes[ from - 1 ].firstChild.innerHTML;
             tbody.childNodes[from].firstChild.width =  tbody.childNodes[ from - 1 ].firstChild.width;
             from--;
        }
        tbody.childNodes[to].firstChild.innerHTML     = saveObj;
        tbody.childNodes[to].firstChild.width = saveWidth;
    }
    else
    {

        iDiff = to - from;

        var saveObj     = tbody.childNodes[from].firstChild.innerHTML;
        var saveWidth     = tbody.childNodes[from].firstChild.width;

        for(var i = 0 ; i < iDiff; i++)
        {
             tbody.childNodes[from].firstChild.innerHTML =  tbody.childNodes[ from + 1 ].firstChild.innerHTML;
             tbody.childNodes[from].firstChild.width =  tbody.childNodes[ from +1 ].firstChild.width;
            from++;
        }

        tbody.childNodes[to].firstChild.innerHTML     = saveObj;
        tbody.childNodes[to].firstChild.width = saveWidth;
    }

    for(var i = 0 ; i < rowCount; i++)
            tbody.childNodes[to].firstChild.selectIndex = i;

    InitHeader();
    return ;
    //以下是對第一行以外的行進行操作
    for ( var iRowInsert = 0 ; iRowInsert < tbody.rows.length; iRowInsert++ )
    {
        from = origfrom;
        to = origto;
        if( from > to )
        {
            iDiff = from - to;
            //var saveObj = tbody.children[iRowInsert].children[from].innerHTML
            for(var i = 0 ; i < iDiff; i++)
            {
                tbody.children[iRowInsert].children[from].innerHTML = tbody.children[iRowInsert].children[from - 1].innerHTML;
                from--;
            }
            tbody.children[iRowInsert].children[to].innerHTML = saveObj;

        }
        else
        {
            iDiff = to - from;
            var saveObj = tbody.children[iRowInsert].children[from].innerHTML
            for(var i = 0 ; i < iDiff; i++)
            {
                tbody.children[iRowInsert].children[from].innerHTML = tbody.children[iRowInsert].children[from + 1].innerHTML;
                from++;
            }
            tbody.children[iRowInsert].children[to].innerHTML = saveObj;
        }
    }
}

</script>

表格列的拖動

再談23種設計模式（3）：行爲型模式（學習筆記）

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

簡單拖動效果

XMLHTTP 獲得服務器端對象

PDF文件的生成

表格列的拖動

javascript 類

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結