SOURCE

var dragFun = function(){
				var maxWidth = 0; //可拖动最大距离
				var move = false;//设置拖动区域是否可以拖动
				var leftArae = 0;
				//鼠标按下事件
				var dragOut = $(".drag-out");
				var dragArea = $(".drag-out .drag-area");
				var dragCode = $(".drag-out .drag-code");
				dragArea.mousedown(function(){
					move = true ; 
					maxWidth = dragOut.width() - dragArea.width() ;//可以移动的最大距离
					leftArae= parseInt(dragOut.offset().left); //距离左边的距离
					
				})
				//鼠标拖动事件
				$(document).mousemove(function(e){
					movePx = e.pageX - leftArae ; 
					if(move == true){
						if(movePx > 0 && movePx <= maxWidth){
							dragArea.css({"left":movePx});
							dragCode.css({"width":movePx});
						}else if(movePx > maxWidth){
							dragArea.unbind("mousedown");
							$(document).unbind("mousemove");
							$(document).unbind("mouseup");
							dragOut.find("span").html("校验成功").css({"color":"#fff"})
						}
					}
				})
				$(document).mouseup(function(){//鼠标离开事件
					if(move == true){
						move = false;
						if(maxWidth > movePx){
							dragArea.css({"left":0});
							dragCode.css({"width":0});
						}
					}
				})
			}
			$(function(){
				var drag = dragFun();
				$(".drag-area").drag
			})

<div class="drag-out">
			<span>拖动校验</span>
			<div class="drag-area">》</div>
			<div class="drag-code"></div>
		</div>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

.drag-out{
				width:300px;
				margin: 50px auto;
				position: relative;
				height: 35px;
				line-height: 35px;
				background-color: #DDDDDD;
				text-align: center;
				user-select:none;
			}
			.drag-out span{
				z-index: 10;
				position: relative;
			}
			.drag-area{
				position: absolute;
				height: 33px;
				border:1px solid #CCCCCC;
				width: 50px;
				top: 0;
				left: 0;
				background-color: #eee;
				cursor: move;
				line-height: 32px;
				user-select:none;
			}
			.drag-code{
				position: absolute;
				width: 0;
				height: 35px;
				left: 0;
				top: 0;
				background-color: #3be288;
			}