PC端slider组件 (转自个人百度空间)

[mishe]

(function($,undefined){
    $.fn.dragDrop = function(options,callback){
        var defaults ={
            focusElement:null, //点击哪个元素开始拖动,可为空。不为空时，需要为被拖动元素的子元素。
            dir:'all', //拖动方向：['all','vertical','horizontal']
            dirArea:null, //限制在哪个区域拖动,以数组形式提供[minX,maxX,minY,maxY]
            dirMax:200 //单向拖动的最大值，单位PX
        };
        if(typeof(options)=="function"){
            options={};
            callback=options;
        }
        var opts = $.extend({},defaults,options),
            bDraging = false,
            moveElement = $(this),
            ew=moveElement.outerWidth(),
            eh=moveElement.outerHeight();
        //点击哪个元素，以触发移动。
        //该元素需要是被移动元素的子元素（比如标题等）
        var focusElement = opts.focusElement ? $(opts.focusElement,moveElement) : moveElement ;

        if(!focusElement || focusElement.length<=0){
            throw new Error('focusElement is not found! the element must be a child of '+this.id);
            return false;
        }

        // statX|Y : 初始时，鼠标与被移动元素原点的距离
        // moveX|Y : 移动时，被移动元素定位位置 (新鼠标位置与statX|Y的差值)
        var dragParams = {statX:0,statY:0,moveX:0,moveY:0};
        if(opts.dir=="all"){
            moveElement.css({'position':'absolute','left':0,'top':0});
        }else{
            moveElement.css({'position':'absolute','left':-ew/2,'top':0});
        }

        function move(v){
            //dirArea格式: [左上角x,左上角Y,左下角x,左下角Y]
            if(v!=undefined){
                if(opts.dir=='all'){
                    dragParams.moveX= v.x;
                    dragParams.moveY= v.y;
                }else if(opts.dir=='vertical'){
                    dragParams.moveY=v;
                }else{
                    dragParams.moveX=v;
                }
            }
            if(opts.dir=='all'){
                if(opts.dirArea){
                    if(dragParams.moveX<opts.dirArea[0]){
                        dragParams.moveX=opts.dirArea[0]
                    }
                    if(dragParams.moveX>opts.dirArea[2]-ew){
                        dragParams.moveX=opts.dirArea[2]-ew
                    }
                    if(dragParams.moveY<opts.dirArea[1]){
                        dragParams.moveY=opts.dirArea[1]
                    }
                    if(dragParams.moveY>opts.dirArea[3]-eh){
                        dragParams.moveY=opts.dirArea[3]-eh
                    }
                }
            }else if (opts.dir=='vertical'){
                if(dragParams.moveY<-eh/2){
                    dragParams.moveY=-eh/2;
                }
                if(dragParams.moveY>opts.dirMax-eh/2){
                    dragParams.moveY=opts.dirMax-eh/2;
                }
            }else{
                if(dragParams.moveX<-ew/2){
                    dragParams.moveX=-ew/2;
                }
                if(dragParams.moveX>opts.dirMax-ew/2){
                    dragParams.moveX=opts.dirMax-ew/2;
                }
            }

            if(opts.dir=='all'){
                moveElement.css({'left':dragParams.moveX,'top':dragParams.moveY});
            }else if (opts.dir=='vertical'){
                moveElement.css({'top':dragParams.moveY});
            }else if(opts.dir=='horizontal'){
                moveElement.css({'left':dragParams.moveX});
            }
        }

        function mouseDown(e){
            bDraging = true;
            //改变鼠标形状
            if(opts.dir=='all'){
                moveElement.removeClass('move');
            }else{
                moveElement.removeClass('w-resize');
            }
            moveElement.addClass('move');
            //捕获事件。（该用法，还有个好处，就是防止移动太快导致鼠标跑出被移动元素之外）
            if(moveElement.get(0).setCapture){
                moveElement.get(0).setCapture();
            }
            dragParams.statX = e.pageX - moveElement.position().left;
            dragParams.statY = e.pageY - moveElement.position().top;
            return false;
        }

        function mouseMove(e){
            if(bDraging){
                dragParams.moveX = e.pageX - dragParams.statX;
                dragParams.moveY = e.pageY - dragParams.statY;
                move();
                if(typeof(callback)==='function'){
                    if(opts.dir=='all'){
                        callback(dragParams);
                    }else if(opts.dir=='vertical'){
                        callback(dragParams.moveY+eh/2);
                    }else{
                        callback(dragParams.moveX+ew/2);
                    }

                }
            }
        }

        function mouseUp(e){
            bDraging=false;
            moveElement.css({'cursor':'default'});
            moveElement.removeClass('move');
            if(moveElement.get(0).releaseCapture){
                moveElement.get(0).releaseCapture();
            }
        }

        function enable(){
            focusElement = opts.focusElement ? $(opts.focusElement,moveElement) : moveElement ;
            focusElement.unbind('mousedown.silder').bind('mousedown.silder',mouseDown);
            if(!focusElement.get(0).setCapture){
                focusElement=$(document);
            }
            focusElement.unbind('mousemove.silder').bind('mousemove.silder',mouseMove);
            focusElement.unbind('mouseup.silder').bind('mouseup.silder',mouseUp);
        }

        function disable(){
            focusElement = opts.focusElement ? $(opts.focusElement,moveElement) : moveElement ;
            focusElement.unbind('mousedown.silder');
            if(!focusElement.get(0).setCapture){
                focusElement=$(document);
            }
            focusElement.unbind('mousemove.silder');
            focusElement.unbind('mouseup.silder');
        }

        enable();
        return {
            val:function(v){
                if(typeof(v)==undefined){
                    if (opts.dir=='vertical'){
                        return dragParams.moveY+eh/2
                    }else if(opts.dir=='horizontal'){
                        return dragParams.moveX+ew/2
                    }else{
                        return {x:dragParams.moveX,y:dragParams.moveY}
                    }
                }else{
                    move(v)
                }
            },
            enable:function(){
                enable();
            },
            disable:function(){
                disable();
            }
        }
        return this;
    };
    $.fn.slider=function(options,callback){
        var defaults ={
            parent:$(this).parent(), //滑块的区域范围
            highObj:$(this).parent().find('.high'), //高亮选中区域
            dir:'horizontal',//拖动方向：['vertical','horizontal']
            initVal:0,
            min:0,
            max:100
        };
        if(typeof(options)=="function"){
            callback=options;
            options={};
        }
        var opts = $.extend({},defaults,options),
            ew=$(this).outerWidth(),
            eh=$(this).outerHeight(),
            width=opts.parent.width(),
            height=opts.parent.height(),
            max=opts.max,
            min=opts.min,
            returnValue,dragObj;
        if(opts.dir=='horizontal'){
            dragObj=$(this).dragDrop({dir:opts.dir,dirMax:width},function(d){
                returnValue=evalNum('width',d);
                callback(returnValue);
            })
        }else{
            dragObj=$(this).dragDrop({dir:opts.dir,dirMax:height},function(d){
                returnValue=evalNum('height',d);
                callback(returnValue);
            })
        }
        $(defaults.parent).bind('click',function(e){
            var x= e.pageX-$(defaults.parent).offset().left,
                y= e.pageY-$(defaults.parent).offset().top;
            if(opts.dir=='horizontal'){
                setVal(x);
            }else{
                setVal(y);
            }
        });

        function evalNum(arrow,d){
            var ar=arrow=='width'?width:height,
                num=(d/ar*(max-min+1)+min).toFixed(0);
            num=num-max>=0?max:(num-min<=0?min:num);
            opts.highObj.css(arrow,d);
            return num
        }
        setVal(opts.initVal);

        function setVal(v,bl){
            if(opts.dir=='horizontal'){
                v=v>=width?width:v;
                dragObj.val(v-ew/2);
                v=evalNum('width',v);
            }else{
                v=v>=height?height:v;
                dragObj.val(v-eh/2)
                v=evalNum('height',v);
            }
            if(bl!=1)
                callback(v);
        }

        return {
            val:function(v){
                if(typeof(v)==undefined){
                    return returnValue;
                }else{
                    if(opts.dir=='horizontal'){
                        v=v/(max-min+1)*width;
                    }else{
                        v=v/(max-min+1)*height
                    }
                    setVal(v,1)
                }
            },
            enable:function(){
                dragObj.enable();
            },
            disable:function(){
                dragObj.disable();
            }
        }
    }
})(jQuery);