interhack/2026.camp.public.website
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

disable dragable elements for touch devices

Browse Source
This commit is contained in:
vincent-peugnet 2025-11-11 14:34:23 +01:00
parent 2ed48fac10
commit e923c4c87b
1 changed files with 6 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
drag.js
View File

@ -26,19 +26,13 @@ function move(e) {
target.setAttribute('data-moving', '1'); target.setAttribute('data-moving', '1');
if (e.clientX) { target.oldX = e.clientX;
target.oldX = e.clientX; // If they exist then use Mouse input target.oldY = e.clientY;
target.oldY = e.clientY;
} else {
target.oldX = e.touches[0].clientX; // Otherwise use touch input
target.oldY = e.touches[0].clientY;
}
target.oldLeft = window.getComputedStyle(target).getPropertyValue('left').split('px')[0] * 1; target.oldLeft = window.getComputedStyle(target).getPropertyValue('left').split('px')[0] * 1;
target.oldTop = window.getComputedStyle(target).getPropertyValue('top').split('px')[0] * 1; target.oldTop = window.getComputedStyle(target).getPropertyValue('top').split('px')[0] * 1;
document.addEventListener('mousemove', drag); document.addEventListener('mousemove', drag);
document.addEventListener('touchmove', drag, {passive: true});
function drag(event) { function drag(event) {
event.preventDefault(); event.preventDefault();
@ -46,16 +40,11 @@ function move(e) {
if (!target.moving) { if (!target.moving) {
return; return;
} }
if (event.clientX) { target.distX = event.clientX - target.oldX;
target.distX = event.clientX - target.oldX; target.distY = event.clientY - target.oldY;
target.distY = event.clientY - target.oldY;
} else {
target.distX = event.touches[0].clientX - target.oldX;
target.distY = event.touches[0].clientY - target.oldY;
}
newLeft = target.oldLeft + target.distX; newLeft = target.oldLeft + target.distX;
newTop = target.oldTop + target.distY; newTop = target.oldTop + target.distY;
target.style.left = stepedSize(newLeft) + "px"; target.style.left = stepedSize(newLeft) + "px";
target.style.top = stepedSize(newTop) + "px"; target.style.top = stepedSize(newTop) + "px";
} }
@ -65,13 +54,11 @@ function move(e) {
target.setAttribute('data-moving', '0'); target.setAttribute('data-moving', '0');
} }
document.addEventListener('mouseup', endDrag) document.addEventListener('mouseup', endDrag)
document.addEventListener('touchend', endDrag)
} }
function activateDraggables() { function activateDraggables() {
for (var draggable of draggables) { for (var draggable of draggables) {
draggable.addEventListener('mousedown', move); draggable.addEventListener('mousedown', move);
draggable.addEventListener('touchstart', move, {passive: true});
} }
} }
@ -81,7 +68,7 @@ function randomizeDragables() {
for (var randomStart of randomStarts) { for (var randomStart of randomStarts) {
randX = Math.floor(Math.random() * maxX); randX = Math.floor(Math.random() * maxX);
randY = Math.floor(Math.random() * maxY); randY = Math.floor(Math.random() * maxY);
randomStart.style.left = randX + "px"; randomStart.style.left = randX + "px";
randomStart.style.top = randY + "px"; randomStart.style.top = randY + "px";
} }
} }