JavaScript实现Table列宽可拖动的基本代码

页面导航:首页 > 网络编程 > JavaScript > JavaScript实现Table列宽可拖动的基本代码

JavaScript实现Table列宽可拖动的基本代码

来源: 作者: 时间:2016-02-04 09:15 【

因为jquery目前在前端开发中很受大家喜爱,故本源码也是基于jquery的,实际上可以说目前开发已经依赖上它了,谁让它那么好用呢 某些时候我们需要实现用来布局的div或者table列可根据

因为jquery目前在前端开发中很受大家喜爱,故本也是基于jquery的,实际上可以说目前开发已经依赖上它了,谁让它那么好用呢微笑

某些时候我们需要实现用来布局的div或者table列可根据需要来拖动,从而改变布局的宽度。那么,我们知道我们无法为任何一个容器的border添加事件。所以,我们需要添加一个差不多宽度(大概5-10px)的div虚拟容器的左右边框。即我们需要为原有的容器添加一个div来作为他的某一边界,这样这个虚拟的边界就可以添加鼠标事件,这是前提。

下面的代码是我们需要为这个虚拟边界的div添加的拖动事件(3的可拖动属性目前兼容不好)。

        
        var isDrag = false;
        var x = 0; //操作对象在x轴的一个参考量
        $("#resizerCol").mousedown(function () {
            isDrag = true;
        });
        $("#resizerCol").mouseup(function () {
            isDrag = false;
        });
        $("#resizerCol").mouut(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%,否则需要近一半调整。


Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<