表格行拖动

最新推荐文章于 2025-09-28 09:37:13 发布

转载最新推荐文章于 2025-09-28 09:37:13 发布 · 611 阅读

文章标签：

#null #table #javascript #border #存储 #div

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现表格行拖拽排序的方法。通过自定义HTC文件为表格赋予交互能力，包括行选中高亮、鼠标悬停变色及行拖拽交换位置等功能。适用于需要灵活调整表格数据顺序的应用场景。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>
<meta name=Originator content="Microsoft Visual Studio .NET 7.1"><script language=javascript>

</script>

</head>
<body  >
        <table dragcolor="gray" slcolor="#ffffcc" hlcolor="#BEC5DE"  cellspacing="0" cellpadding="3"  dragcolor="gray"     bordercolor="#000099" border="1" id="MyTable" style="border-color:#000099;width:100%;border-collapse:collapse;BEHAVIOR:url(mytable.htc)">
            <tr id= 1><td width=50 height=20 id=1>1</td></tr>
            <tr  id=t2><td   width=50 height=20 id=2>2</td></tr>
            <tr  id=t3><td  width=50 height=20   id=3>3</td></tr>
            <tr  id=t3><td  width=50 height=20   id=3>4</td></tr>
    </table>

</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>