原生JS实现表格行拖动及单击排序(兼容各浏览器)

DEMO

支持拖动表格行第一列拖动表格行、支持单击表头排序、支持跨浏览器禁止选中文字(防止拖动时选中)。其中,排序算法为博主自行用原生 js 实现的快速排序算法。

参考文献

《Firefox禁止选择,屏蔽右键》http://www.opwer.com/showthread.asp?threadid=1726

 

——————以下为旧版的不完善的代码———————
代码均经过测试,可以直接复制来使用(取消选择只支持IE)。在我写完这段代码最后一行的时候,猛然发现~如果将表格里面的内容存储为数组的话那么早就解决了……如果那样做的话,什么都是浮云……不过终归算一次尝试吧~~第一次写这么长的原生JS。

本代码是直接用原生 JS 来操作 DOM 对象解决表格的拖拽问题。拖动表格的第一列可以将表格手动重排。bug在于拖拽的时候总是会选中表格中的文字。

<!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>
    <title>draggableTable</title>
    <style type="text/css">
        #draggableTable td
        {
            border: solid 1px gray;
        }
    </style>
</head>
<body>
    <table id="draggableTable">
        <thead>
            <tr>
                <th>
                    Heading
                </th>
                <th>
                    Another Heading
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    row 1, cell 1
                </td>
                <td>
                    row 1, cell 2
                </td>
            </tr>
            <tr>
                <td>
                    row 2, cell 1
                </td>
                <td>
                    row 2, cell 2
                </td>
            </tr>
            <tr>
                <td>
                    row 3, cell 1
                </td>
                <td>
                    row 3, cell 2
                </td>
            </tr>
            <tr>
                <td>
                    row 4, cell 1
                </td>
                <td>
                    row 4, cell 2
                </td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">
        window.onload = function() {
            //variables
            var draggableTable = document.getElementById("draggableTable");
            var draggingShowDiv = document.createElement("div");

            var currentMoveTr = null;

            //initation
            initDraggingShowDiv();
            bindMouseEvents();

            //bind functions
            function bindMouseEvents() {
                for (i = 0
; i < draggableTable.rows.length; i++) {
                    draggableTable.rows[i].cells[0].onmousedown = function() {
                        mouseDownOnTd(this.parentNode);
                    };
                    draggableTable.rows[i].cells[0].onmousemove = function() {
                        mouseMoveOnTd(this.parentNode);
                    };
                    draggableTable.rows[i].cells[0].onmouseup = function() {
                        mouseUpOnTd(this.parentNode);
                    };
                    draggableTable.rows[i].cells[0].onmouseout = function() {
                        mouseOutTd(this.parentNode);
                    };
                    draggableTable.rows[i].cells[0].style.cursor = "pointer";
                }
            }

 

            //dragging functions
            function mouseDownOnTd(Obj) {
                varCurrentMoveTr(Obj);
            }
            function mouseMoveOnTd(Obj) {
                if (isCurrentMoveTrExist()) {
                    turnBottomBorderRed(Obj);
                    showDraggingShowDiv();
                }
            }
            function mouseUpOnTd(Obj) {
                doMoveTr(Obj);
                clearCurrentMoveTr();
                hideDraggingShowDiv();
            }
            function mouseOutTd(Obj) {
                turnBottomBorderGray(Obj);
            }

            //justifying functions
            function isCurrentMoveTrExist() {
                return (currentMoveTr != null);
            }

 

            //var functions
            function varCurrentMoveTr(Obj) {
                currentMoveTr = Obj;
            }
            function clearCurrentMoveTr() {
                currentMoveTr = null;
            }

 

            //about draggingShowDiv
            function initDraggingShowDiv() {
                draggingShowDiv.style.position = "absolute";
                draggingShowDiv.style.display = "none";
                document.body.appendChild(draggingShowDiv);
            }
            function showDraggingShowDiv() {
                //draggingShowDiv.style.pixelTop = document.body.scrollTop + event.clientY + 10;
                //draggingShowDiv.style.pixelLeft = document.body.scrollLeft + event.clientX + 10;
                draggingShowDiv.innerHTML = '<table style="border:solid 1px gray;"><tr>' + currentMoveTr.innerHTML + '</table></tr>';
                draggingShowDiv.style.backgroundColor = "brown";
                draggingShowDiv.style.display = "inline";
            }
            function hideDraggingShowDiv() {
                draggingShowDiv.style.display = "none";
            }

            //about the red postion indicator
            function turnBottomBorderRed(trObj) {
                for (i = 0; i < trObj.cells.length; i++) {
                    trObj.cells[i].style.borderBottomColor = "red";
                }
            }
            function turnBottomBorderGray(trObj) {
                for (i = 0; i < trObj.cells.length; i++) {
                    trObj.cells[i].style.borderBottomColor = "gray";
                }
            }

            //disable text selection
            // function disableTextSelection() {
            // document.body.setAttribute("onselectstart", "return false;");
            // }
            // function enableTextSelection() {
            // document.body.removeAttribute("onselectstart");
            // }

            //do moving functions
            function doMoveTr(Obj) {
                if (isCurrentMoveTrExist()) {
                    var newTr = draggableTable.insertRow(returnTrIndex(Obj) + 1);
                    newTr.innerHTML = currentMoveTr.innerHTML;

                    draggableTable.deleteRow(returnTrIndex(currentMoveTr));
                    bindMouseEvents();
                }
            }

 

            //common lib
            function returnTrIndex(trObj) {
                for (i = 0; i < draggableTable.rows.length; i++) {
                    if (draggableTable.rows[i] == trObj) {
                        return i;
                    }
                }
            }
        };
    </script>

</body>
</html>

 

发布者

袁 源

我是袁源,职业是前端开发 关注我的新浪微博

2 thoughts on “原生JS实现表格行拖动及单击排序(兼容各浏览器)”

  1. 这个排序是我在网上找的最好用的排序 美女大牛能不能加个 多选拖动的功能 有了多谢拖动就完美了

发表评论

电子邮件地址不会被公开。 必填项已用*标注