Answer
t.me/js_testОтвет:
function onMouseMove(event)...
Объяснение:
Данную задачу я решил показать в сегодняшней статье потому что Front-End разработчик должен уметь не только работать с JavaScript, но и с версткой так же. А приведенная в статье задача часто используется в повседневной жизни разрабов:)
Почему в ответе приведена именно функция function onMouseMove(event)?
Потому что это основная функция, в которой и будут происходить основные расчеты и действия.
А реализация данной задачи будет приведена ниже.
Код для проверки:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="slider" class="slider">
<div class="thumb"></div>
</div>
<script>
let thumb = slider.querySelector('.thumb');
thumb.onmousedown = function(event) {
event.preventDefault(); // предотвратить запуск выделения (действие браузера)
let shiftX = event.clientX - thumb.getBoundingClientRect().left;
// shiftY здесь не нужен, слайдер двигается только по горизонтали
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
function onMouseMove(event) {
let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;
// курсор вышел из слайдера => оставить бегунок в его границах.
if (newLeft < 0) {
newLeft = 0;
}
let rightEdge = slider.offsetWidth - thumb.offsetWidth;
if (newLeft > rightEdge) {
newLeft = rightEdge;
}
thumb.style.left = newLeft + 'px';
}
function onMouseUp() {
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mousemove', onMouseMove);
}
};
thumb.ondragstart = function() {
return false;
};
</script>
</body>
</html>