jquery左键拖动选值,类似html5的input[range]

来源:互联网 发布:真人发音英语软件 编辑:程序博客网 时间:2024/05/20 17:59

最近项目要做一个类似于html5里的Input[range]滑动选值的效果,如图,原理很简单,拖动时目标随鼠标位置变化,不过中间也遇到了一个问题,在chrome下没问题,在FF和IE下,只有右键能很好的拖动,左键拖动一下就不能动了,最后无意中发现FF和IE在对<a>标签的拖动有特殊的处理,无奈,不用<a>标签就是了。

同时支持多个同时调用,如果放开鼠标时目标处于中间,则会自动移动到最近的图点处。

资源可在http://download.csdn.net/detail/guyuehu452/4317644下载,不用积分。

腾讯微博:http://t.qq.com/guyue1106/profile?pgv_ref=im.minicard.title&ptlang=2052,

新浪weibo:http://weibo.com/1714234642/profile?leftnav=1&wvr=3.6&mod=personinfo

欢迎互加!

html代码:

<dl>
      <dt>你能接受的着装要求是?</dt>
     <dd><span> 休闲型</span><span class="dragBox"><em class="dragImg"></em></span><span>制服型</span></dd>
 </dl>

css样式就不多说了;

js代码:

$(function(){
    $('.dragBox').dragSel();   
})

(function($){
    $.fn.dragSel= function(){
        $(this).each(function(i,item){
            var pram ={
                _left:$(item).offset().left,
                _top:$(item).offset().top,
                _x: 0,
                _y: 0,
                flg: false,
                $em:$(item).find('em'),//拖动对象
                _al:0
            };
            pram.$em.mousedown(function(e){
                if(e.button==0)pram.flg = true;
            });
            $(document).bind('mousemove',function(e){
                e = e || window.event;
                if(pram.flg){
                    pram.$em.selectUnable()
                    pram._x= e.pageX;
                    pram._y= e.pageY;
                    pram.$em.css({left:pram._x - pram._left});
                }
            });    
            $(document).mouseup(function(e){
                e = e || window.event;
                pram.flg = false;
                clearInterval(pram.s);
                pram._al = pram.$em.offset().left - pram._left +5;
                var n = $(item).width()/8;
                if(pram._al<n){
                    pram.$em.animate({left:"0"});
                }else if(pram._al<n*3){
                    pram.$em.animate({left:n*2-5+"px"});
                }else if(pram._al<n*5){
                    pram.$em.animate({left:n*4-5+"px"});
                }else if(pram._al<n*7){
                    pram.$em.animate({left:n*6-5+"px"});
                }else{
                    pram.$em.animate({left:n*8-5+"px"});
                }
            });
        })
    }
    
    //防止拖动中选中
    $.fn.selectUnable=function(){
        if(document.selection){//IE ,Opera
            if(document.selection.empty)
                document.selection.empty();//IE;
            else //Opera
                document.selection = null;
        }else if(window.getSelection){//FF,Safari
            window.getSelection().removeAllRanges();
        }
    };
})(jQuery);

原创粉丝点击
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防,我是瞎子 魅族mx5系统铃声没有了怎么办 魅族主板坏了怎么办 魅族mx5螺丝滑丝怎么办 魅族魅蓝e手机被锁了怎么办 魅蓝e被锁机了怎么办 魅蓝3s卡顿怎么办 魅族note5玩王者荣耀卡怎么办 魅族手机内存不够怎么办 魅族手机音量小怎么办 魅族mx5指纹解锁失灵怎么办 魅族手机费电快怎么办 魅族mx4pro玩王者荣耀卡怎么办 魅蓝5s玩游戏卡怎么办 魅蓝s6玩游戏卡怎么办 OPPO王者荣耀对局闪退怎么办 魅族手机太慢怎么办 魅蓝5信号不好怎么办 魅蓝数据网速慢怎么办 魅族联通网速慢怎么办 魅族手机wifi信号弱怎么办 魅蓝e2信号差怎么办 魅蓝e2gps信号弱怎么办 魅族网络信号差怎么办 魅族手机gps信号弱怎么办 魅族手机突然没有信号怎么办 魅族手机流量信号不好怎么办 魅族手机wifi信号差怎么办 魅族5s信号不好怎么办 魅族mx5的双击不亮屏怎么办 魅族mx5返回键失灵怎么办 电信苹果3g网速慢怎么办 魅蓝6开不了机怎么办 手机应用被锁了怎么办 魅族电池不耐用怎么办 魅族mx6现在很卡怎么办 魅族e2手机屏幕背景黑色怎么办 魅族x6手机锁了怎么办 360n5返回键失灵怎么办 360n5返回键不好用怎么办 魅族手机锁屏怎么办 魅族手机锁住了怎么办