因为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%，否则需要近一半调整。