代码改变世界

拖拽插入Table的列（I.E. ONLY）

2010-02-24 13:46  花晓霜  阅读(626)  评论(0)  编辑  收藏  举报

啥都不说直接上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Table Test (I.E. Only)</title>

    <script type="text/javascript">
        /*得到表格列的内容*/
        function getCols(srcCellIndex,obj) {
            obj = typeof obj === 'string' ? document.getElementById(obj) : obj;
            var s = '';
            /*读出表格列的的内容*/
            s += '<tr><th style=\"font-size:12px;text-align:center;font-weight:bold;line-height: 23px;'
            s += 'border: 1px solid #77ABF2;height: 25px;white-space: nowrap;background-color:#AEAEAE;">'
            s += obj.rows[0].cells[srcCellIndex].innerHTML + '</th></tr>';

            for(var i = 1;i < obj.rows.length ;i++) {
                s += '<tr><td>' + obj.rows[i].cells[srcCellIndex].innerHTML + '</td></tr>';
            }
            return s;
        }

        /*得到表格对象*/
        function getTable(obj) {
            while(obj.tagName.toLowerCase() != 'table') {
                obj = obj.parentElement;
            }
            return obj;
        }

        /*交换列*/
        function swapCol(srcCellIndex,destCellIndex,obj) {
            obj = typeof obj === 'string' ? document.getElementById(obj) : obj;
            for(var i = 0;i < obj.rows.length ;i++) {
                obj.rows[i].cells[srcCellIndex].swapNode(obj.rows[i].cells[destCellIndex]);
            }
        }

        /*插入到目标列钱，表格列重新排序，条件：|目标列-起始列|>=2*/
        function reSortCol(srcCellIndex,destCellIndex,obj) {
            obj = typeof obj === 'string' ? document.getElementById(obj) : obj;
            if(srcCellIndex < destCellIndex) {
                do {
                    swapCol(srcCellIndex,srcCellIndex + 1,obj);
                    srcCellIndex++;
                } while(srcCellIndex != destCellIndex - 1)
            } else if(srcCellIndex > destCellIndex) {
                do {
                    swapCol(srcCellIndex,srcCellIndex - 1,obj);
                    srcCellIndex--;
                } while(srcCellIndex != destCellIndex + 1);
            } else {
                return;
            }

        }

        function createDiv() {
            var div = document.createElement('div');
            div.style.cssText += 'border:1px dashed #003F87;background:#FFFFFF;overflow:hidden;';
            div.style.cssText += 'zIndex:10000;position:absolute;filter:Alpha(opacity=70);font-size:12px;';
            return div;
        }

        /*得到事件促发的th元素*/
        function getThEl() {
            var el = document.elementFromPoint(event.x,event.y);
            if(el.tagName.toLowerCase() == 'th') {
                return el;
            }
            return;
        }

        /*得到DOM对象的位置*/
        function getObjPos(obj) {
            var x = y = 0;
            if(obj.getBoundingClientRect) {
                var box = obj.getBoundingClientRect();
                x = box.left + Math.max(document.documentElement.scrollLeft,document.body.scrollLeft) - document.documentElement.clientLeft;
                y = box.top + Math.max(document.documentElement.scrollTop,document.body.scrollTop) - document.documentElement.clientTop;
            } else {
                while(obj != document.body) {
                    x += obj.offsetLeft;
                    y += obj.offsetTop;
                    obj = obj.offsetParent
                }
            }
            return { 'x': x,'y': y };
        }

        /*得到鼠标的位置*/
        function getCurPos() {
            e = event || window.event;
            return e.pageX ? { x: e.pageX,y: e.pageY} : { x: e.clientX + document.documentElement.scrollLeft -
       document.documentElement.clientLeft,y: e.clientY + document.documentElement.scrollTop -
       document.documentElement.clientTop
            };
        }
        /*插入的整个过程*/
        function startSwap() {
            var startEl = getThEl();
            if(typeof startEl == 'undefined')
                return;
            if(typeof div === 'undefined') {
                div = createDiv();
            }
            document.body.appendChild(div);
            div.style.width = startEl.clientWidth;
            div.style.height = getTable(startEl).clientHeight;
            div.innerHTML = '<table class=\"Shadow\">' + getCols(startEl.cellIndex,getTable(startEl)) + '</table>';
            div.style.left = getObjPos(startEl).x + 'px';
            div.style.top = getObjPos(startEl).y + 'px';
            div.style.display = 'block';

            var isDragable = true;
            var curX = getCurPos().x;
            var curY = getCurPos().y;
            var objX = getObjPos(div).x;
            var objY = getObjPos(div).y;


            div.onmousemove = function() {
                if(isDragable) {
                    div.style.cssText += 'cursor:move;';
                    div.style.left = getCurPos().x - curX + objX + 'px';
                    div.style.top = getCurPos().y - curY + objY + 'px';
                }
            }

            div.onmouseup = function() {
                isDragable = false;
                div.style.display = 'none';
                var endEl = getThEl();
                if(typeof endEl === 'undefined') {
                    return;
                }
                var srcCellIndex = startEl.cellIndex;
                var destCellIndex = endEl.cellIndex;
                /*如果起始列和目标列相邻，直接交换，否则插入后重新排序*/
                if(Math.abs(destCellIndex - srcCellIndex) == 1) {
                    swapCol(srcCellIndex,destCellIndex,getTable(endEl));
                } else {
                    reSortCol(srcCellIndex,destCellIndex,getTable(endEl));
                }
            }
            /*鼠标移除层，事件取消*/
            div.onmouseout = function() {
                isDragable = false;
                div.style.display = 'none';
                return;
            }
        }

    </script>

    <style type="text/css">
        body
        {
            overflow: hidden;
        }
        .Shadow
        {
            color: #FC8331;
            width: 100%;
            padding: 3px;
            font-family: Arial, "宋体";
            font-size: 12px;
            font-weight: normal;
            line-height: 22px;
            border-collapse: collapse;
            border-right: 1px solid #0000;
            border-top: 1px solid #0000;
            border-left: 1px solid #0000;
            border-bottom: 1px solid #0000;
        }
        .Grid
        {
            background-color: #ffffff;
            padding: 3px;
            font-family: Arial, "宋体";
            font-size: 12px;
            font-weight: normal;
            line-height: 22px;
            color: #494949;
            text-decoration: none;
            border-collapse: collapse;
            border-right: 1px solid #2A8CBF;
            border-top: 1px solid #2A8CBF;
            border-left: 1px solid #2A8CBF;
            border-bottom: 1px solid #2A8CBF;
        }
        .GridHeader
        {
            font-family: Arial, "宋体";
            font-size: 12px;
            font-weight: bold;
            line-height: 23px;
            border: 1px solid #77ABF2;
            height: 25px;
            text-decoration: none;
            text-align: center;
            white-space: nowrap;
            color: #000000;
        }
    </style>
</head>
<body>
    <table id="table" width="90%" border="1" class="Grid">
        <thead class="GridHeader">
            <tr bgcolor="cccccc">
                <th>
                    <span>姓名</span>
                </th>
                <th>
                    <span>性别</span>
                </th>
                <th>
                    <span>年龄</span>
                </th>
                <th>
                    <span>地址</span>
                </th>
                <th>
                    <span>编号</span>
                </th>
                <th>
                    <span>成绩</span>
                </th>
                <th>
                    <span>年级</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    周周
                </td>
                <td>
                    F
                </td>
                <td>
                    20
                </td>
                <td>
                    上海
                </td>
                <td>
                    001
                </td>
                <td>
                    98
                </td>
                <td>
                    一
                </td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>
                    达达
                </td>
                <td>
                    M
                </td>
                <td>
                    21
                </td>
                <td>
                    北京
                </td>
                <td>
                    012
                </td>
                <td>
                    71
                </td>
                <td>
                    二
                </td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>
                    黄宏
                </td>
                <td>
                    M
                </td>
                <td>
                    12
                </td>
                <td>
                    深圳
                </td>
                <td>
                    014
                </td>
                <td>
                    89
                </td>
                <td>
                    一
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
            </tr>
        </tfoot>
    </table>

    <script type="text/javascript">
        (function() {
            var ths = document.getElementsByTagName('th');
            for(var i = 0;i < ths.length;i++) {
                ths[i].attachEvent('onmousedown',startSwap);
            }
        })();
    </script>

</body>
</html>