拖动行的代码实现

最新推荐文章于 2024-05-26 11:21:43 发布

转载最新推荐文章于 2024-05-26 11:21:43 发布 · 320 阅读

文章标签：

#function #null #table #border #div

WEB 专栏收录该内容

50 篇文章

订阅专栏

<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 type="text/javascript">
    /************************************ dragedTableData.js *******************************/
    /************************************ dragedTableData.js *******************************/
    /*
    * 可以实现表格内容的内部拖动
    * 确保中间过度层的存在，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 = obj.parentElement;
            //alert(obj.tagName);
            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 = "<table><tr>" + obj.innerHTML + "</tr></table>";
            //alert(oDiv.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.rows.length; i++) {
                if (oTable.rows[i].tagName.toLowerCase() == "tr") {
                    pos = getPos(oTable.rows[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.rows[i] != dragedTable_preCell)
                            oTable.rows[i].style.backgroundColor = dragedTable_endColor;
                    }
                    else {
                        if (oTable.rows[i] != dragedTable_preCell)
                            oTable.rows[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.rows.length; i++) {
                    pos = getPos(oTable.rows[i]);
                    //alert(pos.length);
                    //计算鼠标位置，是否在某个单元格的范围之内
                    if (event.x > pos[1] && event.x < pos[1] + oTable.rows[i].offsetWidth
       && event.y > pos[0] && event.y < pos[0] + oTable.rows[i].offsetHeight) {
                        if (oTable.rows[i].tagName.toLowerCase() == "tr") {
                            var obj = oTable.rows[i];
                            var _len = obj.cells.length;
                            //alert(_len);
                            var _cell;

                            for (var i = 0; i < _len; i++) {
                                //_cell = document.createElement("td");
                                //_cell.innerText = obj.cells[i].innerText;
                                //alert(obj.cells[i].innerText);
                                //dragedTable_preCell.appendChild(_cell);
                                dragedTable_preCell.cells[i].innerText = obj.cells[i].innerText;
                                //obj.cells[i].innerText = dragedTable_movedDiv.cells[i].innerText;
                            }
                            //var content = document.all(dragedTable_movedDiv).innerHTML;
                            //alert(document.all(dragedTable_movedDiv).firstChild.rows.length);
                            var temp = document.all(dragedTable_movedDiv).firstChild.rows[0];
                            _len = temp.cells.length;
                            for (var j = 0; j < _len; j++) {
                                obj.cells[j].innerText = temp.cells[j].innerText;
                            }
                            document.all(dragedTable_movedDiv).innerHTML = "";
                            //alert(document.all(dragedTable_movedDiv).innerHTML);
                            //alert(dragedTable_preCell.innerHTML);
                            //oTable.rows[dragedTable_preCell.rowIndex].innerHTML =" klkldsskdl";
                            //obj.innerHTML = "<td>"+document.all(dragedTable_movedDiv).innerHTML;

                            /*
                            //交换文本
                            dragedTable_preCell.innerHTML = oTable.cells[i].innerHTML;
                            oTable.cells[i].innerHTML = document.all(dragedTable_movedDiv).innerHTML;
                            */
                            //清除原单元格和目标单元格的样式
                            dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
                            oTable.rows[i].style.backgroundColor = dragedTable_normalColor;
                            oTable.rows[i].style.cursor = "";
                            dragedTable_preCell.style.cursor = "";
                            dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
                            break;
                        }
                    }
                }
            }
            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.rows.length; i++)
            oTable.rows[i].style.backgroundColor = dragedTable_normalColor;
    }

    document.onmousemove = function () {
        dragDiv();
    }

    /************************************ dragedTableData.js 结束 *******************************/
    /************************************ dragedTableData.js 结束 *******************************/
</script>
<script type="text/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 height="20px">
<TH colspan="4" style="">拖动交换单元格内容</TH>
</TR>
<TR height="20px">
<TD>Java</TD>
<TD>Java One </TD>
<TD>JBuilder</TD>
<TD>Stuts</TD>
</TR>
<TR height="20px">
<TD>C++</TD>
<TD>Visual Studio</TD>
<TD>Office</TD>
<TD>Windows</TD>
</TR>
<TR height="30px">
<TD>PhotoShop</TD>
<TD>Java</TD>
<TD>Illustrator</TD>
<TD>PageMaker</TD>
</TR>
<TR height="30px">
<TD>Cartoon</TD>
<TD>Telephone</TD>
<TD>China</TD>
<TD>USA</TD>
</TR>
<TR height="30px">
<TD>Java</TD>
<TD>Java One </TD>
<TD>JBuilder</TD>
<TD>Stuts</TD>
</TR>
<TR height="30px">
<TD>C++</TD>
<TD>Visual Studio</TD>
<TD>Office</TD>
<TD>Windows</TD>
</TR>
<TR height="30px">
<TD>PhotoShop</TD>
<TD>Flash</TD>
<TD>Illustrator</TD>
<TD>PageMaker</TD>
</TR>
<TR height="30px">
<TD>Cartoon</TD>
<TD>Telephone</TD>
<TD>China</TD>
<TD>USA</TD>
</TR>
</TABLE>
</BODY>
</HTML>