Difference between revisions of "User:BakiDance/timeless.js"
From Drawn to Life Wiki
(Blanked the page) Tag: Blanking |
|||
| 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'); | ||
| + | }; | ||
Revision as of 18:18, 28 June 2022
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');
};