Показать сообщение отдельно
  #6 (permalink)  
Старый 15.12.2014, 22:46
Интересующийся
Отправить личное сообщение для leshiple Посмотреть профиль Найти все сообщения от leshiple
 
Регистрация: 09.12.2014
Сообщений: 21

var thumb = document.getElementById('thumb');
var bg 	  = document.getElementById('bg');
var drag_status = false;
var count = 0;
var x;
thumb.onmousedown = function(e){
	drag_status = true;
	x = e.pageX - thumb.offsetLeft;
}

document.onmousemove = function(e){
	if(!drag_status) return false;
		thumb.style.left = e.pageX - x  + 'px';
	if(thumb.offsetLeft < 0) thumb.style.left =  0 + 'px';
	if(thumb.offsetLeft > bg.offsetWidth - thumb.offsetWidth)thumb.style.left =  bg.offsetWidth - thumb.offsetWidth + 'px';
	count = thumb.offsetLeft;
	document.getElementsByTagName('p')[0].innerHTML = count;
}

document.onmouseup = function(){
	drag_status = false;
}


Зачем в 8 строке:
x = e.pageX - thumb.offsetLeft;

?
когда можно написать:
x = e.pageX;

Ведь нам важно координата х первого клика мыши по бегунку и дальнейшее изменение этой координаты. Вычисляем разницу координат первоначального клика и текущего положения курсора и результат устанавливаем в свойство left.
thumb.offsetLeft не играет никакой роли тут, на момент исполнения функции начинающейся в 6 строке thumb.offsetLeft равна нулю и далее х передается в следующую функцию и не меняется на всем протяжении выполнения этой функции. Или я что-то не правильно понял?
Ответить с цитированием