Как применить onmouseup к элементу?

Question

[Junior Development]

Подскажите, как реализовать скролл мышкой?

Изучая JS решил попрактиковаться на создании адаптивного слайдера.
Не могу разобраться с событиями мыши.

При клике на блок слайдера срабатывает событие onmousedown, далее тяну блок в сторону (mousemove), а вот как правильно написать условие при котором:
если потянул блок в строну (к примеру, равную ширины блока), то срабатывает скролл на 1 блок.

Ссылка на пример слайдера
Ссылка на скролл слайдера

<!-- представим, что это слайдер :) -->
<div class="main-block">
	<div class="line-blocks">
		<div class="block">Блок карусели 1</div>
		<div class="block">Блок карусели 2</div>
		<div class="block">Блок карусели 3</div>
		<div class="block">Блок карусели 4</div>
	</div>
</div>

let lineBlock = document.querySelector('.line-blocks');

// клик мышки
lineBlock.onmousedown = function() {

	// следуем за курсором
	lineBlock.addEventListener('mousemove', function(event) {
		lineBlock.style.left = (event.clientX - lineBlock.clientWidth / 2) + 'px'
	});
}

Answer 1

[Владимир Солнцев]

mouseup, как и mousemove применяйте не к элементу, а к body или родительскому контейнеру вашего слайда.

mousemove
Каждое движение мыши над элементом генерирует это событие.

mouseup
Кнопка мыши нажата/отпущена над элементом.
learn.javascript.ru/mouse-events-basics