intento 2

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;