Javascript-форум - JS event- координаты

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - JS event- координаты (https://javascript.ru/forum/events/39312-js-event-koordinaty.html)

JS event- координаты

<!DOCTYPE HTML>
<head>
<meta charset="UTF-8" />
<title>Полоса</title>
</head>

<body>

<style>
#beg {

}
#polosa {
    border: 1px solid #FFFFFF;
    height: 5px;
    margin: 0 auto;
    position: relative;
    top: 10px;
    width: 150px;
}
#block {
    background: none repeat scroll 0 0 #CCCCCC;
    height: 50px;
    width: 200px;
}
#znach {
    left: 25px; 
    position: relative;
}
</style>
<div id="block">
    <div id="polosa"></div>
    <div id="beg"   style="background: none repeat scroll 0 0 #FFFFFF;
    height: 20px;
    left: 24px;
    position: relative;
    width: 5px;
    cursor: pointer;" onmousedown="begun(this);"></div>
    <div id="znach" >0</div>
</div>
<script>
function begun(el){
    var k = false;
    var event = event || window.event;
    el.onmouseout = function(event){
        if(k==true || parseInt(el.style.left)<24 || parseInt(el.style.left)>90){
            if(parseInt(el.style.left)<24){
                el.style.left = '24px';
                
            }
            if(parseInt(el.style.left)>90){
                el.style.left = '90px';
            }
        return false;}
        else{
            var znach = document.getElementById('znach');
            if(parseInt(el.style.left)<24){
                el.style.left = '24px';
            }
            if(parseInt(el.style.left)>90){
                el.style.left = '90px';
                znach.innerHTML=event.layerX-25;
            }
            
            el.style.left = event.layerX-10+'px';
            znach.innerHTML=event.layerX-25;
        }
    }
    el.onmouseup = function(event){k = true; }
}


</script>
</body>
</html>

Почему у меня иногда отображает не правильно положение мыши то есть прокручиваю бегунком и у меня иногда его отбрасывает далеко назад

el.style.left = event.layerX-10+'px';
console.log(event.layerX-10); //отрицательное значение, поэтому и убегает влево
znach.innerHTML=event.layerX-25;
console.log(event.layerX-25);

я делал так:
при клике сохранял в переменную значение left (css) (допустим var left = parseInt(this.style.left))
а также координаты мыши при клике. var click_y = ...

и координаты при перемещении var move_y
и теперь все это слепливаем: obj.style.left = left + move_y - click_y;

нет 10 это чтоб его сразу не отбрасывало в бок то есть это отступ не в том дело попробуйте код запусьтить и увидите что иногда он резко и не нат 10 пикселей отлетает влево

Цитата:

Сообщение от skrudjmakdak (Сообщение 258315)

el.style.left = event.layerX-10+'px';
console.log(event.layerX-10); //отрицательное значение, поэтому и убегает влево
znach.innerHTML=event.layerX-25;
console.log(event.layerX-25);

ну это смотря как вы дерните мышку. ща я немного накидаю..
а вообще есть плагин jquery где это уже реализовано)

да я так чисто для себя решил поучить js ядро) остались события но полной документации найти что то не совсем могу по ним везде кусками

Цитата:

Сообщение от skrudjmakdak (Сообщение 258318)

ну это смотря как вы дерните мышку. ща я немного накидаю..
а вообще есть плагин jquery где это уже реализовано)

накидал, но криво работает, мне надо было с нуля))
но принцип примерно такой.. и там верстку немного бы переделать

<!DOCTYPE HTML>
<head>
<meta charset="UTF-8" />
<title>Полоса</title>
</head>

<body>

<style>
#beg {

}
#polosa {
    border: 1px solid #FFFFFF;
    height: 5px;
    margin: 0 auto;
    position: relative;
    top: 10px;
    width: 150px;
}
#block {
    background: none repeat scroll 0 0 #CCCCCC;
    height: 50px;
    width: 200px;
}
#znach {
    left: 25px; 
    position: relative;
}
</style>
<div id="block">
    <div id="polosa"></div>
    <div id="beg"   style="background: none repeat scroll 0 0 #FFFFFF;
    height: 20px;
    left: 24px;
    position: relative;
    width: 5px;
    cursor: pointer;" onmousedown="begun(this);"></div>
    <div id="znach" >0</div>
</div>
<script>
var left = -1;
var click_x = -1;

function begun(el)
	{
	var event = event || window.event;
	left = parseInt(el.style.left);
	click_x = event.layerX;

	window.onmousemove = function(event)
		{
		var event = event || window.event;
		console.log(':' + (left) + ':' +  (event.layerX - click_x))
		el.style.left = left + event.layerX - click_x + 'px';
		}
	
	window.onmouseup = function(event)
		{
		window.onmousemove = undefined;
		}
	}


</script>
</body>
</html>