进度条拖拽问题

老师请问一下，当拖拽进度条的时候，选中了播放容器中的文字内容，这时候松开鼠标，然后移到进度条上即使不按下鼠标也能拖动，这要怎么解决

董建州 2017-07-11

收起

2回答

提问者董建州 2017-07-12 15:02:26

// 更新当前时间和进度条
	var timeUpdate=function(totalTime,realTime) {
		if (realTime==null) {
			realTime=video[0].currentTime;
		}else{
			if (realTime<=0) {realTime=0}
			if (realTime>totalTime) {realTime=totalTime}	
			video[0].currentTime=realTime;
		}
		currentTime.text(format(realTime));
		timeBar.width((realTime/totalTime*100)+'%');
	}

	// 拖动进度条
	var timeBarDrag=function() {
		var drag=false;
		var sound=false;
		progress.on('mousedown',function(event) {
			drag=true;
			timeUpdate(video[0].duration,(event.pageX-progressLeft)/progressWidth*video[0].duration);
		});
		$(document).on('mouseup',function(event) {
			if(drag) {
				drag=false;
				timeUpdate(video[0].duration,(event.pageX-progressLeft)/progressWidth*video[0].duration);
			}
		});
		$(document).on('mousemove',function(event) {
			if (drag) {
				timeUpdate(video[0].duration,(event.pageX-progressLeft)/progressWidth*video[0].duration);
			}
		});
	}

收起回答

小丸子爱吃菜 #1

你这个代码是参照老师写的还是自己写的，因为要运行结果，看一下你说的那个问题是什么情况，所以你只给我JS代码我运行不了，要给我全部的，我能够运行效果的。

2017-07-12 16:02:12

小丸子爱吃菜 2017-07-12 10:25:00

可以将你的代码粘贴过来，看下怎么回事。

祝学习愉快!

收起回答

提问者董建州 #1

// 更新当前时间和进度条 var timeUpdate=function(totalTime,realTime) { if (realTime==null) { realTime=video[0].currentTime; }else{ if (realTime<=0) {realTime=0} if (realTime>totalTime) {realTime=totalTime} video[0].currentTime=realTime; } currentTime.text(format(realTime)); timeBar.width((realTime/totalTime*100)+'%'); } // 拖动进度条 var timeBarDrag=function() { var drag=false; var sound=false; progress.on('mousedown',function(event) { drag=true; timeUpdate(video[0].duration,(event.pageX-progressLeft)/progressWidth*video[0].duration); }); $(document).on('mouseup',function(event) { if(drag) { drag=false; timeUpdate(video[0].duration,(event.pageX-progressLeft)/progressWidth*video[0].duration); } }); $(document).on('mousemove',function(event) { if (drag) { timeUpdate(video[0].duration,(event.pageX-progressLeft)/progressWidth*video[0].duration); } }); }

2017-07-12 15:01:23