disable dragable elements for touch devices

This commit is contained in:
vincent-peugnet 2025-11-11 14:34:23 +01:00
parent 2ed48fac10
commit e923c4c87b

25
drag.js
View File

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