首页 > 代码库 > JavaScript实现左右拖动的实现的基本原理

JavaScript实现左右拖动的实现的基本原理

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

        
        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的东西就是我们拖动的对象。但是拖动起来不是那么流畅,还请大家发表意见。

JavaScript实现左右拖动的实现的基本原理