diff --git a/templates/z_comps/boton_chat.html b/templates/z_comps/boton_chat.html index 0d265b3..640dabb 100644 --- a/templates/z_comps/boton_chat.html +++ b/templates/z_comps/boton_chat.html @@ -61,6 +61,8 @@ let offsetX, offsetY; let isDragging = false; let hasMoved = false; + let touchStartX = 0; + let touchStartY = 0; const savedPosition = localStorage.getItem('floatingBtnPosition'); if (savedPosition) { @@ -73,16 +75,17 @@ btn.style.top = '20px'; } - // Eventos para mouse + // MOUSE EVENTS btn.addEventListener('mousedown', startDrag); document.addEventListener('mousemove', drag); document.addEventListener('mouseup', stopDrag); - // Eventos para touch + // TOUCH EVENTS btn.addEventListener('touchstart', startDragTouch, { passive: false }); document.addEventListener('touchmove', dragTouch, { passive: false }); document.addEventListener('touchend', stopDragTouch); + // Evitar abrir link si se arrastró el botón link.addEventListener('click', function (e) { if (hasMoved) { e.preventDefault(); @@ -118,7 +121,7 @@ hasMoved = true; } - function stopDrag() { + function stopDrag(e) { if (!isDragging) return; isDragging = false; @@ -134,7 +137,6 @@ function startDragTouch(e) { if (e.touches.length !== 1) return; - isDragging = true; hasMoved = false; @@ -142,28 +144,40 @@ offsetX = e.touches[0].clientX - rect.left; offsetY = e.touches[0].clientY - rect.top; + touchStartX = e.touches[0].clientX; + touchStartY = e.touches[0].clientY; + btn.style.cursor = 'grabbing'; btn.style.left = `${rect.left}px`; btn.style.top = `${rect.top}px`; btn.style.right = 'auto'; - e.preventDefault(); // evita scroll + e.preventDefault(); } function dragTouch(e) { if (!isDragging || e.touches.length !== 1) return; - const x = e.touches[0].clientX - offsetX; - const y = e.touches[0].clientY - offsetY; + const currentX = e.touches[0].clientX; + const currentY = e.touches[0].clientY; + + const deltaX = Math.abs(currentX - touchStartX); + const deltaY = Math.abs(currentY - touchStartY); + + if (deltaX > 5 || deltaY > 5) { + hasMoved = true; + } + + const x = currentX - offsetX; + const y = currentY - offsetY; btn.style.left = `${x}px`; btn.style.top = `${y}px`; - hasMoved = true; e.preventDefault(); // evita scroll } - function stopDragTouch() { + function stopDragTouch(e) { if (!isDragging) return; isDragging = false;