构建可拖拽table

<style type="text/css">
table{
	border-collapse:collapse;
	width:300px;
}
table caption{
	border-right:1px solid #abc;
	border-left:1px solid #abc;
	border-top:2px solid #000;
	border-bottom:2px solid #000;
	background-color:#afd;
}
#sales tr,#sales td{
	border:1px solid #abc;
	text-align:center;
}
</style>

<table id="sales" summary="summary here">
	<caption>Main Title</caption>
		<col/>
		<col/>
		<col/>
	<thead>
		<tr><th class="asc">Col1</th><th>Col2</th><th>Col3</th></tr>
	</thead>
	<tbody>
		<tr><td>A1</td><td>S2</td><td>W3</td></tr>
		<tr><td>B1</td><td>C2</td><td>V3</td></tr>
		<tr><td>C1</td><td>X2</td><td>K3</td></tr>
	</tbody>
</table>
<button onclick="drag()">Drag</button>

function drag(){
    var sortTable = new ColumnDrag('sales');
}
function ColumnDrag(id) {
    this.tbl = document.getElementById(id);
    if (this.tbl && this.tbl.nodeName == "TABLE") {
        this.state = null;
        this.prevX = null;
        this.cols = this.tbl.getElementsByTagName("col");
        this.makeDraggable();
    }
}

ColumnDrag.prototype.makeDraggable = function () {
    // Add trailing text node for IE
    for (var i=0; this.tbl.rows[i]; i++) {
        var td = document.createElement("td");
            td.style.display = "none";
        this.tbl.rows[i].appendChild(td);
    }

    // Wire up headings
    var headings = this.tbl.tHead.rows[0].cells;
    for (var i=0; headings[i]; i++) {
        headings[i].cIdx = i; 

        var a = document.createElement("a");
            a.href = "#";
            a.innerHTML = "← " + headings[i].innerHTML + " →";
            a.onclick = function () {
                return false;
            }

        headings[i].className += " draggable";
        headings[i].onmousedown = function (that) {
            return function (e) {
                that.mousedown(e);
                return false;
            }
        }(this);
        document.onmousemove = function (that) {
            return function (e) {
                that.mousemove(e);
                return false;
            }
        }(this);
        document.onmouseup = function (that) {
            return function () {
                var e = that.clearAllHeadings();
                if (e) that.mouseup(e);
            }
        }(this);

        headings[i].innerHTML = "";
        headings[i].appendChild(a);

    }
}

ColumnDrag.prototype.clearAllHeadings = function (){
    var e = false;
    for (var i=0; this.cols[i]; i++) {
        var th = this.tbl.tHead.rows[0].cells[i];
        if (th.className.match(/down/)) {
            e = {target: th};
        }
    }
    return e;
}

ColumnDrag.prototype.mousedown = function (e) {
    e = e ? e : window.event;
    var elm = e.target? e.target : e.srcElement;
    elm = elm.nodeName == "A" ? elm.parentNode : elm;

    this.state = "drag";
    elm.className += " down";
    this.cols[elm.cIdx].className = "drag";
    this.from = elm;
}

ColumnDrag.prototype.mousemove = function (e) {
    e = e ? e : window.event;
    var x = e.clientX ? e.clientX : e.pageX;
    var elm = e.target? e.target : e.srcElement;

    if (this.state == "drag" && elm != this.from) {
        var from = this.from.cIdx;
        var to = elm.cIdx;

        if ((from > to && x < this.prevX) || (from < to && x > this.prevX)) {

            // highlight column
            this.cols[from].className = "";
            this.cols[to].className = "drag";

            if (from < to) to++;

            // shift all cells belonging to head
            var rows = this.tbl.rows;
            for (var i=0; rows[i]; i++) {
                rows[i].insertBefore(rows[i].cells[from], rows[i].cells[to]);
            }

        }
    }
    this.prevX = x;
}
ColumnDrag.prototype.mouseup = function (e) {

    e = e ? e : window.event;
    var elm = e.target? e.target : e.srcElement;
    elm = elm.nodeName == "A" ? elm.parentNode : elm;

    this.state = null;
    var col = this.cols[elm.cIdx];
    col.className = "dropped";
     return;
}

整理自《The Art & Science of Javascript》