var move = false; //移动标记
var _x;//原点移动的距离
var _width = $('.dragX').width();//坐标轴总长度
var _leftWidth=_width*0.76; //width:0%~100%
var _rightWidth=_width*0.24;  //width:100%~500%

$(function(){
	kedu();
})
function kedu(){
	//生成Y轴刻度
	$('.drag-ul ul').html('');
	var Yheight=$('.drag-ul ul').height();
	var Y1=Yheight/5;
	$('.drag-ul ul').append(
		'<li class="PercentBit pb25" style="bottom:'+Y1*0.25+'px">'+
			'<p>'+25+'分位值</p>'+
			'<span></span>'+
			'<p>800,000</p>'+
		'</li>'+
		'<li class="PercentBit pb50" style="bottom:'+Y1*0.5+'px">'+
			'<p>'+50+'分位值</p>'+
			'<span></span>'+
			'<p>800,000</p>'+
		'</li>'+
		'<li class="PercentBit pb75" style="bottom:'+Y1*0.75+'px">'+
			'<p>'+75+'分位值</p>'+
			'<span></span>'+
			'<p>800,000</p>'+
		'</li>'+
		'<li class="PercentBit pb100" style="bottom:'+Y1*1+'px">'+
			'<p>'+100+'分位值</p>'+
			'<span></span>'+
			'<p>800,000</p>'+
		'</li>'+
		'<li class="PercentBit pb125" style="bottom:'+Y1*1.25+'px">'+
			'<p>'+125+'分位值</p>'+
			'<span></span>'+
			'<p>800,000</p>'+
		'</li>'+
		'<li class="PercentBit pb150" style="bottom:'+Y1*1.5+'px">'+
			'<p>'+150+'分位值</p>'+
			'<span></span>'+
			'<p>800,000</p>'+
		'</li>'+
		'<li class="PercentBit pb200" style="bottom:'+Y1*2+'px">'+
			'<p>'+200+'分位值</p>'+
			'<span></span>'+
			'<p>800,000</p>'+
		'</li>'+
		'<li class="PercentBit pb250" style="bottom:'+Y1*2.5+'px">'+
			'<p>'+250+'分位值</p>'+
			'<span></span>'+
			'<p>800,000</p>'+
		'</li>'+
		'<li class="PercentBit pb300" style="bottom:'+Y1*3+'px">'+
			'<p>'+300+'分位值</p>'+
			'<span></span>'+
			'<p>800,000</p>'+
		'</li>'+
		'<li class="PercentBit pb400" style="bottom:'+Y1*4+'px">'+
			'<p>'+400+'分位值</p>'+
			'<span></span>'+
			'<p>800,000</p>'+
		'</li>'+
		'<li class="PercentBit pb500" style="bottom:'+Y1*5+'px">'+
			'<p>'+500+'分位值</p>'+
			'<span></span>'+
			'<p>800,000</p>'+
		'</li>'
	)
}
function drag(e){
	if(move) {
		kedu();
		var x3=x;
		var x = e.pageX - _x;
    var time=1;    
		if(x){
			(function aa(){
        time++
        console.log(time)
				$('.numtime').html(time);
        setTimeout(aa,1000);
			})()
			
			
		}
		if(x <=0) {x = 0}
		if(x >= _width) {x = _width}
		$(".drag-handle").css({"left": x});
		$('.numpx').html(x);//坐标点距离原点的位置(px)
		var numpb=0;
		if(x<=_leftWidth){  //0%~100%
			numpb=x/_leftWidth*100;
			$('.numpb').html(numpb.toFixed(2));//坐标点距离原点位置(%)
		}else{  //100%~500%
			x2=x-_leftWidth;
			numpb=x2/_rightWidth*40*10+100;
			$('.numpb').html(numpb.toFixed(2));//坐标点距离原点位置(%)
		}
		if(numpb<=100){
			$('.drag-ul ul').height('500%');
			$('.pb-bgs').css('bottom',numpb+'%');
		}else
		if(numpb>100&&numpb<=300){
			$('.drag-ul ul').height(400-numpb+'%');
			var Yzhu=$('.drag-ul ul').height()/5*numpb/100;
			$('.pb-bgs').css('bottom',Yzhu+'px');
			if(numpb>120){
				$('.pb25,.pb75,.pb125').hide()
			}
			if(numpb>235){
				$('.pb50,.pb150,.pb250').hide()
			}
		}else
		if(numpb>300){
			$('.drag-ul ul').height('100%');
			var Yzhu=$('.drag-ul ul').height()/5*numpb/100;
			$('.pb-bgs').css('bottom',Yzhu+'px');
			$('.pb25,.pb50,.pb75,.pb125,.pb150,.pb250').hide()
		}
	}
	
}
$(".drag-handle").mousedown(function(e) {//按下鼠标按键
	move = true;
	_x = e.pageX - parseInt($(".drag-handle").css("left"));
});
$(document).mouseup(function() {//释放鼠标按键
	move = false;
});
$(document).mousemove(function(e) {//鼠标指针在指定的元素中移动
	drag(e);
})