Estoy tratando de hacer eventos de arrastrar y soltar (para mover texto) en mi página web. Funciona bien en las pantallas grandes, pero cuando lo pruebo en pantallas pequeñas (menos de 480) el evento se dispara, pero el texto desaparece o el toque toma la pantalla detrás del div (el cuerpo de la página en sí)

JS

 let x = 0; let y = 0; const ele = document.getElementById("textOverImage"); if (innerWidth <= 480) { ele.addEventListener('touchstart', handleStart, false); ele.addEventListener('touchend', handleEnd, false); ele.addEventListener('touchmove', handleMove, false); function handleStart(s) { console.log('touch started'); x = s.clientX; y = s.clientY; document.querySelector("#lock_image").addEventListener('touchmove', handleMove); document.querySelector("#lock_image").addEventListener('touchend', handleEnd); }; function handleMove(s) { console.log('touch moved'); const dx = s.clientX - x; const dy = s.clientY - y; ele.style.top = `${ele.offsetTop + dy}px`; ele.style.left = `${ele.offsetLeft + dx}px`; ele.classList.remove('centered'); ele.classList.remove('customClass'); ele.classList.add('customMovement'); x = s.clientX; y = s.clientY; }; function handleEnd() { console.log('touch ended'); document.querySelector("#lock_image").removeEventListener('touchmove', handleMove); document.querySelector("#lock_image").removeEventListener('touchend', handleEnd); }; }