diff --git a/templates/z_comps/boton_chat.html b/templates/z_comps/boton_chat.html
index ef80447..72a45ce 100644
--- a/templates/z_comps/boton_chat.html
+++ b/templates/z_comps/boton_chat.html
@@ -44,7 +44,9 @@
let hasMoved = false;
let touchStartTimer;
const tapThreshold = 200; // Tiempo en milisegundos para considerar un "tap"
- const moveThreshold = 5; // Distancia en píxeles para considerar un "move"
+ const moveThreshold = 10; // Distancia en píxeles para considerar un "move"
+ let initialTouchX, initialTouchY;
+
const savedPosition = localStorage.getItem('floatingBtnPosition');
if (savedPosition) {
@@ -62,10 +64,11 @@
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);
+
// Eventos para touch
- btn.addEventListener('touchstart', startTouch, { passive: true });
- document.addEventListener('touchmove', moveTouch, { passive: false });
- document.addEventListener('touchend', endTouch);
+ btn.addEventListener('touchstart', startTouch, { passive: false });
+ btn.addEventListener('touchmove', moveTouch, { passive: false });
+ btn.addEventListener('touchend', endTouch);
link.addEventListener('click', function (e) {
if (hasMoved) {
@@ -116,35 +119,77 @@
savePosition(x, y);
}
+ // function startTouch(e) {
+ // if (e.touches.length !== 1) return;
+
+ // hasMoved = false;
+ // const touch = e.touches[0];
+ // const startX = touch.clientX;
+ // const startY = touch.clientY;
+
+ // touchStartTimer = setTimeout(() => {
+ // // Si el temporizador termina y no ha habido movimiento, consideramos un tap
+ // link.click();
+ // }, tapThreshold);
+
+ // // Preparar para el movimiento
+ // const rect = btn.getBoundingClientRect();
+ // offsetX = startX - rect.left;
+ // offsetY = startY - rect.top;
+ // }
+
function startTouch(e) {
if (e.touches.length !== 1) return;
- hasMoved = false;
+ e.preventDefault(); // Prevenir comportamiento por defecto
const touch = e.touches[0];
- const startX = touch.clientX;
- const startY = touch.clientY;
+ initialTouchX = touch.clientX;
+ initialTouchY = touch.clientY;
- touchStartTimer = setTimeout(() => {
- // Si el temporizador termina y no ha habido movimiento, consideramos un tap
- link.click();
- }, tapThreshold);
-
- // Preparar para el movimiento
const rect = btn.getBoundingClientRect();
- offsetX = startX - rect.left;
- offsetY = startY - rect.top;
+ offsetX = initialTouchX - rect.left;
+ offsetY = initialTouchY - rect.top;
+
+ hasMoved = false;
+ touchStartTimer = setTimeout(() => {
+ if (!isDragging) {
+ link.click();
+ }
+ }, tapThreshold);
}
+ // function moveTouch(e) {
+ // if (!touchStartTimer || e.touches.length !== 1) return;
+
+ // const touch = e.touches[0];
+ // const currentX = touch.clientX;
+ // const currentY = touch.clientY;
+
+ // // Verificar si el movimiento supera el umbral
+ // if (Math.abs(currentX - (touch.clientX - offsetX)) > moveThreshold || Math.abs(currentY - (touch.clientY - offsetY)) > moveThreshold) {
+ // clearTimeout(touchStartTimer); // Cancelar el temporizador si hay movimiento
+ // isDragging = true;
+ // hasMoved = true;
+
+ // btn.style.cursor = 'grabbing';
+ // btn.style.left = `${currentX - offsetX}px`;
+ // btn.style.top = `${currentY - offsetY}px`;
+ // btn.style.right = 'auto';
+ // e.preventDefault(); // Evitar el scroll durante el arrastre
+ // }
+ // }
+
function moveTouch(e) {
- if (!touchStartTimer || e.touches.length !== 1) return;
+ if (!touchStartTimer || e.touches.length !== 1 || !initialTouchX) return;
const touch = e.touches[0];
const currentX = touch.clientX;
const currentY = touch.clientY;
// Verificar si el movimiento supera el umbral
- if (Math.abs(currentX - (touch.clientX - offsetX)) > moveThreshold || Math.abs(currentY - (touch.clientY - offsetY)) > moveThreshold) {
- clearTimeout(touchStartTimer); // Cancelar el temporizador si hay movimiento
+ if (Math.abs(currentX - initialTouchX) > moveThreshold ||
+ Math.abs(currentY - initialTouchY) > moveThreshold) {
+ clearTimeout(touchStartTimer);
isDragging = true;
hasMoved = true;
@@ -152,10 +197,23 @@
btn.style.left = `${currentX - offsetX}px`;
btn.style.top = `${currentY - offsetY}px`;
btn.style.right = 'auto';
- e.preventDefault(); // Evitar el scroll durante el arrastre
+ e.preventDefault();
}
}
+ // function endTouch(e) {
+ // clearTimeout(touchStartTimer);
+ // if (isDragging) {
+ // isDragging = false;
+ // btn.style.cursor = 'move';
+ // const rect = btn.getBoundingClientRect();
+ // stickToNearestSide(rect.left, rect.top);
+ // savePosition(rect.left, rect.top);
+ // }
+ // }
+
+
+
function endTouch(e) {
clearTimeout(touchStartTimer);
if (isDragging) {
@@ -165,6 +223,8 @@
stickToNearestSide(rect.left, rect.top);
savePosition(rect.left, rect.top);
}
+ initialTouchX = null;
+ initialTouchY = null;
}
function stickToNearestSide(x, y) {