intento 2

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 });
+    btn.addEventListener('touchstart', startTouch, { passive: false });
-    document.addEventListener('touchmove', moveTouch, { passive: false });
+    btn.addEventListener('touchmove', moveTouch, { passive: false });
-    document.addEventListener('touchend', endTouch);
+    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;
+      initialTouchX = touch.clientX;
-      const startY = touch.clientY;
+      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;
+      offsetX = initialTouchX - rect.left;
-      offsetY = startY - rect.top;
+      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) {
+      if (Math.abs(currentX - initialTouchX) > moveThreshold ||
-        clearTimeout(touchStartTimer); // Cancelar el temporizador si hay movimiento
+        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) {