需要给web添加一个水平拖动条，起初认为网上应该这样的jquery一大把，随便搜搜就可以了。去搜了下，果然一大把，嘿嘿。发现目标的下一步就是down下来，然后一个一个试，哪个好就用啦，试了一圈，结果往往会发生悲剧的事情：没有一个是满意的。不过庆幸的是，可以借鉴下别人的经验，虽然有点浪费时间，却也学到了不少。
其实要实现拖动效果也是很容易的事情，弄两个层，一个为背景，一个在上面拖动，计算下位置就可以了，如果有需要的话，传个参数过去，加点动画效果，让它可以接受参数移动。其实我需要的就是这样的效果，哈哈。
代码没有几行，效果也很一般，起码实现功能了，要美化的自己美化去，哈哈。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<mce:style type="text/css"><!--
.dragbar{height:20px;background:#ddd;}
.draghandle{height:18px;width:28px;border:1px solid #444;overflow:hidden;background:#3d642d;position:absolute;top:0px;left:0px;z-index:10;cursor:pointer;}
--></mce:style><style type="text/css" mce_bogus="1">
.dragbar{height:20px;background:#ddd;}
.draghandle{height:18px;width:28px;border:1px solid #444;overflow:hidden;background:#3d642d;position:absolute;top:0px;left:0px;z-index:10;cursor:pointer;}</style>
<mce:script type="text/javascript" src="jquery-1.2.3.js" mce_src="jquery-1.2.3.js"></mce:script>
<mce:script type="text/javascript"><!--
var percent=0;
$(function(){
var handle=$(".draghandle");
var dragbar=$(".dragbar");
dragbar.css("width","200px");
handle.css({"width":"10px","top":dragbar.offset().top,"left":dragbar.offset().left});
var maxlen=parseInt(dragbar.width())-parseInt(handle.outerWidth());
handle.bind("mousedown",function(e){
var x=e.pageX;
var hx=parseInt(handle.offset().left);
$(document).bind("mousemove",function(e){
var left=e.pageX-x+hx<0?0:(e.pageX-x+hx>=maxlen?maxlen:e.pageX-x+hx);
handle.css({left:left,top:dragbar.offset().top});
percent=(left/maxlen*100).toFixed(0);
return false;
});
$(document).bind("mouseup",function(){
$(this).unbind("mousemove");
})
})
function move(percent){
var handle_left=maxlen*percent+dragbar.offset().left;
handle.animate({
left:handle_left,top:dragbar.offset().top
},{duration:1500 , queue:false});
}
});
// --></mce:script>
</head>
<body>
<div class="dragbar">
<div class="draghandle"></div>
</div>
</body>
</html>
![struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)