JavaScript實現Table列寬可拖動的基本代碼

JavaScript實現Table列寬可拖動的基本代碼

因為jquery目前在前端開發中很受大家喜愛，故本源碼也是基於jquery的，實際上可以說目前開發已經依賴上它了，誰讓它那麼好用呢

某些時候我們需要實現用來布局的div或者table列可根據需要來拖動，從而改變布局的寬度。那麼，我們知道我們無法為任何一個html容器的border添加事件。所以，我們需要添加一個差不多寬度（大概5-10px）的div虛擬容器的左右邊框。即我們需要為原有的容器添加一個div來作為他的某一邊界，這樣這個虛擬邊界就可以添加滑鼠事件，這是前提。

下面的代碼是我們需要為這個虛擬邊界的div添加的拖動事件（CSS3的可拖動屬性目前相容不好）。

        var isDrag = false;

        var x = 0; //操作對象在x軸的一個參考量

        $("#resizerCol").mousedown(function () {            isDrag = true;        });        $("#resizerCol").mouseup(function () {            isDrag = false;        });        $("#resizerCol").mouseout(function () {            isDrag = false;        });        $("#resizerCol").mousemove(function (e) {            if (isDrag) {                if (x != 0) {                    if (x > e.pageX) {                        console.log("left");                    } else {                        console.log("right");                    }                }                             }        });

是的，源碼中那個ID為resizerCol的東西就是我們拖動的對象。但是拖動起來不是那麼流暢，還請大家發表意見。

續上，後來我發現上面的代碼考慮的太過於嚴密，逐改之，然後發現完美。再次貼上新代碼，再也不用去找上面jquery ui等等外掛程式來解決一個這麼小的問題了！！

        /*         *The event start have to be the virtual partition line.         *But the event end just should be that mouse up in the table.         * Maybe this just is a virtual "drag" event.         */        $("#resizerCol").mousedown(function () {            isDrag = true;        });        $("#whlayout").mouseup(function () {            isDrag = false;        });

         $("#whlayout").mousemove(function (e) {            if(isDrag){                //TODO 直接使用e.pageX去調整需要調整寬度的容器的寬

            }        });

這個ID為whlayout的容器其實是我們要調節寬度的div的父容器，一般情況下它的寬度佔據瀏覽時視窗的100%，否則需要近一半調整。