| Line 1: |
Line 1: |
| − | const ele = document.getElementsByClassName('TEMPLATE-LevelMap'); | + | const slider = document.querySelector('.TEMPLATE-LevelMap'); |
| − | ele.scrollTop = 100;
| + | let isDown = false; |
| − | ele.scrollLeft = 150;
| + | let startX; |
| − | let pos = { top: 0, left: 0, x: 0, y: 0 }; | + | let scrollLeft; |
| | | | |
| − | const mouseDownHandler = function (e) {
| + | slider.addEventListener('mousedown', (e) => { |
| − | pos = {
| + | isDown = true; |
| − | // The current scroll
| + | slider.classList.add('active'); |
| − | left: ele.scrollLeft,
| + | startX = e.pageX - slider.offsetLeft; |
| − | top: ele.scrollTop,
| + | scrollLeft = slider.scrollLeft; |
| − | // Get the current mouse position
| + | }); |
| − | x: e.clientX,
| + | slider.addEventListener('mouseleave', () => { |
| − | y: e.clientY,
| + | isDown = false; |
| − | };
| + | slider.classList.remove('active'); |
| − | | + | }); |
| − | document.addEventListener('mousemove', mouseMoveHandler);
| + | slider.addEventListener('mouseup', () => { |
| − | document.addEventListener('mouseup', mouseUpHandler);
| + | isDown = false; |
| − | }; | + | slider.classList.remove('active'); |
| − | const mouseMoveHandler = function (e) {
| + | }); |
| − | // How far the mouse has been moved
| + | slider.addEventListener('mousemove', (e) => { |
| − | const dx = e.clientX - pos.x;
| + | if(!isDown) return; |
| − | const dy = e.clientY - pos.y;
| + | e.preventDefault(); |
| − | | + | const x = e.pageX - slider.offsetLeft; |
| − | // Scroll the element
| + | const walk = (x - startX) * 3; //scroll-fast |
| − | ele.scrollTop = pos.top - dy;
| + | slider.scrollLeft = scrollLeft - walk; |
| − | ele.scrollLeft = pos.left - dx;
| + | console.log(walk); |
| − | };
| + | }); |
| − | const mouseDownHandler = function(e) {
| |
| − | // Change the cursor and prevent user from selecting the text
| |
| − | ele.style.cursor = 'grabbing';
| |
| − | ele.style.userSelect = 'none';
| |
| − | ...
| |
| − | };
| |
| − | const mouseUpHandler = function () { | |
| − | document.removeEventListener('mousemove', mouseMoveHandler);
| |
| − | document.removeEventListener('mouseup', mouseUpHandler);
| |
| − | | |
| − | ele.style.cursor = 'grab';
| |
| − | ele.style.removeProperty('user-select');
| |
| − | }; | |