需要給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=)