1901010506
/
202106G02


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
							<HTML>
<HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <TITLE>JS 动态拖动表格实现</TITLE>
    <STYLE>
        td {
            width: 20%;
            height: 50px;
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            cursor: default;
        }

        div {
            font-size: 25px;
            text-align: center;
        }

        th {
            height: 50px;
            font-size: 20px;
            font-weight: normal;
            border-bottom: 2px solid black;
            background-color: #CCCCCC
        }

        table {
            border: 1px solid black;
            font-size: 17px;
            text-align: center;
        }
    </STYLE>
    <script language="javascript">
        /************************************ dragedTableData.js *******************************/
        /*一个对表格进行拖拽来交换单元格数据的脚本
         * 可以实现表格内容的内部拖动
         * 确保中间过渡层的存在，id为指定
         * 功能实现：兼容火狐
         * 解决问题：
         * 1.event的获取
         * 2.event的event.srcElement ? event.srcElement: event.target;
         * 3.Table.cells不兼容火狐 改用遍历rows再遍历cells
         * 4.event的横纵标和纵坐标的获取。var x=event.x||event.pageX; var y=event.y||event.pageY;
         * 5.document.all改成document.getElementById
         */
        /*--------全局变量-----------*/
        var dragedTable_x0, dragedTable_y0, dragedTable_x1, dragedTable_y1; // 原来td的横坐标、纵坐标，按下鼠标时的鼠标位置（横坐标、纵坐标）
        var dragedTable_movable = false; // 标识没有td在移动
        var dragedTable_preCell = null; // 为后面让起始单元格（原td）赋值
        var dragedTable_normalColor = null;
        //起始单元格的颜色
        var dragedTable_preColor = "lavender";//淡紫色
        //目标单元格的颜色
        var dragedTable_endColor = "#FFCCFF";//粉红色
        var dragedTable_movedDiv = "dragedTable_movedDiv";
        var dragedTable_tableId = "";
        var flag = true;

        /*--------全局变量-----------*/
        function DragedTable(tableId) {
            // 新建一个过渡div且显示为none，按下鼠标后，过渡div显示，且起始单元格变为淡紫色
            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";
            // 向body中插入一个DOM元素：oTempDiv
            document.body.appendChild(oTempDiv);
            document.getElementById(tableId).onmousedown = showDiv;
        }

        // 获得事件Event对象，用于兼容IE和FireFox
        function getEvent() {
            return window.event || arguments.callee.caller.arguments[0];
        }

        //得到控件的绝对位置
        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 event = getEvent();
            // 得到触发该事件的对象,也就是对触发该事件对象的一个引用
            var obj = event.srcElement ? event.srcElement : event.target;
            // 定义一个数组用来存放位置参数
            var pos = new Array();
            // 获取过渡div
            var oDiv = document.getElementById(dragedTable_movedDiv);
            if (obj.tagName.toLowerCase() == "td") {
                obj.style.cursor = "hand";
                pos = getPos(obj);
                // 计算中间过渡层位置，赋值
                oDiv.style.width = obj.offsetWidth; // 得到td的宽,赋值给临时层oDiv
                oDiv.style.height = obj.offsetHeight; // 得到td的高,赋值给临时层oDiv
                oDiv.style.top = pos[0];  // 得到该td的纵坐标的位置,赋值给临时层oDiv
                oDiv.style.left = pos[1]; // 得到该td的横坐标的位置,赋值给临时层oDiv
                oDiv.innerHTML = obj.innerHTML; //得到该td的文本显示内容,赋值给临时层oDiv
                oDiv.style.display = ""; // 显示临时层,也就是当鼠标选中某一个td,按下去时显示的那个粉色的框框
                dragedTable_x0 = pos[1]; // 该原td的横坐标
                dragedTable_y0 = pos[0]; // 该原td的纵坐标
                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;  // 标识有td在移动
            }
        }

        // 当拖动一个td时,经过其他td时所处理的事件
        function dragDiv() {
            // 移动过渡div，当过渡div移动到某个单元格之上，那个单元格变色成粉红色。
            if (dragedTable_movable) { // 当上面的showDiv事件为真时,执行下面的代码
                var event = getEvent();
                // 获取过渡div
                var oDiv = document.getElementById(dragedTable_movedDiv);
                var pos = new Array();
                var x = event.x || event.pageX;
                var y = event.y || event.pageY;
                var posX = 0;
                var posY = 0;
                var td;
                // 获取起始table
                var oTable = document.getElementById(dragedTable_tableId);
                var rowslength = oTable.rows.length; // 显示table中行的数目
                var cellslength = 0;
                oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0;  // 定义临时层的位置(纵坐标)为:当前鼠标位置(纵坐标)-按下鼠标时的鼠标位置(纵坐标)+原来td的纵坐标
                oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0;  // 定义临时层的位置(横坐标)为:当前鼠标位置(横坐标)-按下鼠标时的鼠标位置(横坐标)+原来td的横坐标
                for (var j = 1; j < rowslength; j++) {
                    cellslength = oTable.rows[j].cells.length;
                    for (var i = 0; i < cellslength; i++) {
                        td = oTable.rows[j].cells[i];
                        if (td.tagName.toLowerCase() == "td") {
                            pos = getPos(td);
                            posX = pos[1];
                            posY = pos[0];
                            //计算鼠标位置，是否在某个单元格的范围之内
                            if (x > posX && x < posX + td.offsetWidth && y > posY && y < posY + td.offsetHeight) {
                                if (td != dragedTable_preCell) td.style.backgroundColor = dragedTable_endColor;
                            } else {
                                if (td != dragedTable_preCell) td.style.backgroundColor = dragedTable_normalColor;
                            }
                        }
                    }
                }
            }
        }


        // 覆盖图层
        function hideDiv() {
            if (dragedTable_movable) {
                var event = getEvent();
                var x = event.x || event.pageX;
                var y = event.y || event.pageY;
                // 获取table
                var oTable = document.getElementById(dragedTable_tableId);
                var pos = new Array();
                var posX = 0;
                var posY = 0;
                var td;
                var rowslength = oTable.rows.length;
                var cellslength = 0;

                if (dragedTable_preCell != null) {
                    for (var j = 1; j < rowslength; j++) {
                        cellslength = oTable.rows[j].cells.length;
                        for (var i = 0; i < cellslength; i++) {
                            td = oTable.rows[j].cells[i];
                            pos = getPos(td);
                            posX = pos[1];
                            posY = pos[0];
                            //计算鼠标位置，是否在某个单元格的范围之内
                            if (x > posX && x < posX + td.offsetWidth && y > posY && y < posY + td.offsetHeight) {
                                if (oTable.rows[j].cells[i].tagName.toLowerCase() == "td") {
                                    if (flag) {
                                        //交换文本
                                        dragedTable_preCell.innerHTML = td.innerHTML;
                                        td.innerHTML = document.getElementById(dragedTable_movedDiv).innerHTML;
                                    }
                                    if (!flag) {
                                        td.innerHTML = document.getElementById(dragedTable_movedDiv).innerHTML;

                                    }

                                    //清除原单元格和目标单元格的样式
                                    dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
                                    td.style.backgroundColor = dragedTable_normalColor;
                                    td.style.cursor = "";
                                    dragedTable_preCell.style.cursor = "";
                                }
                            }
                        }
                    }
                }
                dragedTable_movable = false;
                //清除提示图层
                document.getElementById(dragedTable_movedDiv).style.display = "none";
            }
        }

        document.onkeydown = function (event) {
            var event = event || window.event;
            // var target = event.srcElement || event.target;
            if (event.keyCode == 17) {
                flag = false;
            }
        }

        // 鼠标放开执行的事件
        document.onmouseup = function () {
            hideDiv();
            var oTable = document.getElementById(dragedTable_tableId);
        }

        // 键盘放开执行的事件
        document.onkeyup = function () {
            flag = true;
            hideDiv();
            var oTable = document.getElementById(dragedTable_tableId);
        }


        // 鼠标移动时执行的事件
        document.onmousemove = function () {
            dragDiv();
        }
        /************************************ 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>
    <TR>
        <TD></TD>
        <TD></TD>
        <TD></TD>
        <TD></TD>
    </TR>
</TABLE>
</BODY>