Changes

no edit summary
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');
  −
};