拖拽表格单元格，改变单元格内容

最新推荐文章于 2024-07-13 13:43:30 发布
ForMyWebFrontSide
最新推荐文章于 2024-07-13 13:43:30 发布
阅读量1.8k
点赞数
分类专栏： javascript
javascript 专栏收录该内容
111 篇文章 1 订阅
订阅专栏
http://www.denghuafeng.com/sort/15/page/3
<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;
            width: 15%;
            background: yellow;
        }

        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 *******************************/
        /*一个对表格进行拖拽来交换单元格数据的脚本
         * created by LxcJie 2004.4.12
         * 可以实现表格内容的内部拖动
         * 确保中间过度层的存在，id为指定
         * 修改者 邓华锋(博客：http://www.denghuafeng.com)
         * 功能实现：兼容火狐
         * 解决问题：
         * 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;
        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) {
//            新建一个过渡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";
            document.body.appendChild(oTempDiv);
            document.getElementById(tableId).onmousedown = showDiv;
        }
        function getEvent() {
            if (document.all) {
                return window.event; //如果是ie
            }
            func = getEvent.caller;
            while (func != null) {
                var arg0 = func.arguments[0];
                if (arg0) {
                    if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof(arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
                        return arg0;
                    }
                }
                func = func.caller;
            }
            return null;

        }
        //得到控件的绝对位置
        function getPos(cell) {
            var pos = new Array();
            var t = cell.offsetTop;
            var l = cell.offsetLeft;
// console.log("cell:"+cell+"celloffsetP"+cell.offsetParent);
            while (cell = cell.offsetParent) {
                t += cell.offsetTop;
                l += cell.offsetLeft;
//                console.log("t:" + t + "l:" + l);
            }
            pos[0] = t;
            pos[1] = l;
            return pos;
        }
        //显示图层
        function showDiv() {
            var event = getEvent();
            var obj = event.srcElement ? event.srcElement : event.target;
//            console.log("obj:"+obj.name);
            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;
                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() {
//            移动过渡div，当过渡div移动到某个单元格之上，那个单元格变色成粉红色。
            if (dragedTable_movable) {
                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;
                var cellslength = 0;
                oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0;
                oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0;
                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") {
                                    //交换文本
                                    dragedTable_preCell.innerHTML = td.innerHTML;;
                                    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.onmouseup = function () {
            hideDiv();
            var oTable = document.getElementById(dragedTable_tableId);
//            for (var j = 1; j < oTable.rows.length; j++) {
//                for (var i = 0; i < oTable.rows[j].cells.length; i++) {
//                    oTable.rows[j].cells[i].style.backgroundColor = dragedTable_normalColor;
//                }
//            }
        }
        document.onmousemove = function () {
            dragDiv();
        }
        /************************************ dragedTableData.js 结束 *******************************/
    </script>
    <script language="javascript">
        function init() {
//注册可拖拽表格
            new DragedTable("tableId");
        }
    </script>
</HEAD>
<BODY οncοntextmenu="return false;" onLoad="init()">
<TABLE id="tableId" width="70%" align="center" cellpadding="0" cellspacing="0">
    <tbody>
    <TR>
        <TH colspan="4" style="">拖动交换单元格内容</TH>
    </TR>
    <TR>
        <TD><div>Java</div></TD>
        <TD><div>w</div></TD>
        <TD><div>nn</div></TD>
        <TD><div>mm</div></TD>
    </TR>
    <TR>
        <TD><div>C++</div></TD>
        <TD><div>Visual Studio</div></TD>
        <TD><div>Office</div></TD>
        <TD><div>Windows</div></TD>
    </TR>
    <TR>
        <TD><div>PhotoShop</div></TD>
        <TD><div>Java</div></TD>
        <TD><div>Illustrator</div></TD>
        <TD><div>PageMaker</div></TD>
    </TR>
    <TR>
        <TD><div>Cartoon</div></TD>
        <TD><div>Telephone</div></TD>
        <TD><div>China</div></TD>
        <TD><div>USA</div></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>
    </tbody>
</TABLE>
</BODY>
</HTML>