|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | const ele = document.getElementsByClassName('TEMPLATE-LevelMap');
| |
| − | ele.scrollTop = 100;
| |
| − | ele.scrollLeft = 150;
| |
| − | let pos = { top: 0, left: 0, x: 0, y: 0 };
| |
| | | | |
| − | const mouseDownHandler = function (e) {
| |
| − | pos = {
| |
| − | // The current scroll
| |
| − | left: ele.scrollLeft,
| |
| − | top: ele.scrollTop,
| |
| − | // Get the current mouse position
| |
| − | x: e.clientX,
| |
| − | y: e.clientY,
| |
| − | };
| |
| − |
| |
| − | document.addEventListener('mousemove', mouseMoveHandler);
| |
| − | document.addEventListener('mouseup', mouseUpHandler);
| |
| − | };
| |
| − | const mouseMoveHandler = function (e) {
| |
| − | // How far the mouse has been moved
| |
| − | const dx = e.clientX - pos.x;
| |
| − | const dy = e.clientY - pos.y;
| |
| − |
| |
| − | // Scroll the element
| |
| − | ele.scrollTop = pos.top - dy;
| |
| − | ele.scrollLeft = pos.left - dx;
| |
| − | };
| |
| − | 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');
| |
| − | };
| |
