HTML可拖動行的表格

• 實作思路
• 實作代碼

實作思路

行拖動的實作思路非常簡單，選中一行，往上拖就與上面的行交換位置，往下拖就與下面的行交換位置。問題是如何得到交換行。我見過一個非常詳細的教程，它會把表格裡的每一行的高度與Y坐标計算出來，換言之，都時是比較e.pageX是否在[rowTop,rowBottom]區間之内。但這也帶來第二個問題，有多少行就有多個這樣的區間。于是解法就變成取事件源對象，然後再往上取其父對象，如果其父對象是TR元素，就取其[rowTop,rowBottom]區間…思路非常直接，同時也客觀做出一個限制——不能使用代理拖動。先不談是拖動代理還是拖動實物，光是在移動滑鼠的過程要做的計算量就非常大，幸好還在IE的承受範圍之内。有更好的方法嗎？

人之是以先入為主，因為他就握着這麼幾把鎖匙。如果他手上的鎖匙非常多時，他在開門時就會稍微停下來，認真挑選了。是以熟悉掌握越多的原生API就越好，我們就才擷取更優的選項。換一個思路，在拖動時（mousedown）儲存目前行及其樣式與坐标，拖動中取得滑鼠所在位置上的元素，這個元素是使用一個巧妙的API取得document.elementFromPoint(x,y)。通常情況，我們取得的是TD，當然如果你在裡面塞進一個DIV，那就是DIV羅。然後我們再取得其TR元素，然後比較mousedown時儲存的TR元素是不是同一個元素，不是同一個元素，我們才做進一步的操作。這時我們就要判其是向上移向下移，簡單的減法而已。接着是交換兩行，使用insertBefore。最後當mouseup時，還原行的樣式就是！由于沒有複雜的坐标計算，整個程式出奇的高效！

實作代碼

<!-- HTML -->
<h1>表格行拖動</h1>
<table id="table" class="table">
    <tr>
        <td>1</td>
        <td>One</td>
        <td>dom.require</td>
    </tr>
    <tr id="2">
        <td class="2">2</td>
        <td>Two</td>
        <td>ControlJS</td>
    </tr>
    <tr id="3">
        <td class="3">3</td>
        <td>Three</td>
        <td>HeadJS</td>
    </tr>
    <tr id="4">
        <td class="4">4</td>
        <td>Four</td>
        <td>LAB.js</td>
    </tr>
    <tr id="5">
        <td class="5">5</td>
        <td>Five</td>
        <td>$script.js</td>
    </tr>
    <tr id="6">
        <td class="6">6</td>
        <td>Six</td>
        <td>NBL.js</td>
    </tr>
</table>
           

/* CSS */
.table {
    width: 60%;
    border: 1px solid red;
    border-collapse: collapse;
}

.table td {
    border: 1px solid red;
    height: 20px;
}
           

//JavaScript
window.onload = function () {
    //綁定事件
    var addEvent = document.addEventListener ? function (el, type, callback) {
        el.addEventListener(type, callback, !1);
    } : function (el, type, callback) {
        el.attachEvent("on" + type, callback);
    }
    //移除事件
    var removeEvent = document.removeEventListener ? function (el, type, callback) {
        el.removeEventListener(type, callback);
    } : function (el, type, callback) {
        el.detachEvent("on" + type, callback);
    }
    //精确擷取樣式
    var getStyle = document.defaultView ? function (el, style) {
        return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
    } : function (el, style) {
        style = style.replace(/\-(\w)/g, function ($, $1) {
            return $1.toUpperCase();
        });
        return el.currentStyle[style];
    }
    var dragManager = {
        draging: function (e) {//mousemove時拖動行
            var dragObj = dragManager.dragObj;
            if (dragObj) {
                e = e || event;//清除選區
                if (window.getSelection) {//w3c
                    window.getSelection().removeAllRanges();
                } else if (document.selection) {
                    document.selection.empty();//IE
                }
                var tr = document.elementFromPoint(e.clientX, e.clientY);
                if (tr && tr.nodeName == "TD") {
                    tr = tr.parentNode
                    if (dragObj !== tr) {
                        var y = tr.getBoundingClientRect().top;
                        var down = y > dragObj.getBoundingClientRect().top;//是否向下移動
                        tr.parentNode.insertBefore(dragObj, (down ? tr.nextSibling : tr));
                    }
                };
            }
        },
        dragStart: function (e) {
            e = e || event;
            var target = e.target || e.srcElement;
            if (target.nodeName === "TD") {
                target = target.parentNode;
                dragManager.dragObj = target;
                if (!target.getAttribute("data-background")) {
                    var background = getStyle(target, "background-color");
                    target.setAttribute("data-background", background)
                }
                //顯示為可移動的狀态
                target.style.backgroundColor = "#ccc";
                target.style.cursor = "move";
                addEvent(document, "mousemove", dragManager.draging);
                addEvent(document, "mouseup", dragManager.dragEnd);
            }
        },
        dragEnd: function (e) {
            var dragObj = dragManager.dragObj
            if (dragObj) {
                e = e || event;
                var target = e.target || e.srcElement;
                if (target.nodeName === "TD") {
                    target = target.parentNode;
                    dragObj.style.backgroundColor = dragObj.getAttribute("data-background");
                    dragObj.style.cursor = "default";
                    dragManager.dragObj = null;
                    removeEvent(document, "mousemove", dragManager.draging);
                    removeEvent(document, "mouseup", dragManager.dragEnd);
                }
            }
        },
        main: function (el) {
            addEvent(el, "mousedown", dragManager.dragStart);
        }
    }
    var el = document.getElementById("table");
    dragManager.main(el);
}