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);
- jquery左键拖动选值,类似html5的input[range]
- range——input新属性,可拖动的进度条
- 基于jquery的html5简单拖动插件
- 带提示的input输入框类似html5的 placeholder
- iOS UIPanGestureRecognizer(拖动手势) 和 点击按钮 实现类似左抽屉的效果
- HTML5表单之Input 类型-range
- Range:HTML5中的新型Input类型
- Range:HTML5中的新型Input类型
- jquery实现类似百度的搜索input输入框
- html5的Input Type : Range,大家都知道这个是怎么样的吗?
- 类似chinaren的DIV 拖动
- 手机端HTML5 input被输入法遮挡的jquery解决办法
- 给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
- html5 input type="range"实现拖拉滑条功能
- HTML5:使用Canvas和Input range控件放大缩小图片
- jquery获取input的值
- HTML5 的input类型
- HTML5的input
- WIN7系统下,WIFI共享时出现“无法启动承载网络,组或资源的状态不是执行请求操作的正确状态”
- android:style/Theme
- struts part4
- Excel表格的35招必学秘技
- num_rmb 数字到字符串的转换
- jquery左键拖动选值,类似html5的input[range]
- 关于AWAY3D4在IPAD上闪烁的问题
- 导致电脑突然断电关机的可能原因
- const int a与int const a的区别
- sync
- 微软悄然推出社交网络So.cl
- [MFC]选择目录对话框和选择文件对话框
- C++下使用sqlite简明示例
- Qt开发环境如何部署Mac OS