try fix drag btn 1

templates/z_comps/boton_chat.html

@@ -50,120 +50,170 @@
 </div>
 
 
+
+
+
+
 <script>
   document.addEventListener('DOMContentLoaded', function () {
-  const btn = document.getElementById('floatingBtn');
+    const btn = document.getElementById('floatingBtn');
-  const link = document.getElementById('floatingBtnLink');
+    const link = document.getElementById('floatingBtnLink');
-  let offsetX, offsetY;
+    let offsetX, offsetY;
-  let isDragging = false;
+    let isDragging = false;
-  let hasMoved = false;
+    let hasMoved = false;
 
-  const savedPosition = localStorage.getItem('floatingBtnPosition');
-  if (savedPosition) {
-    const { x, y } = JSON.parse(savedPosition);
-    btn.style.left = x;
-    btn.style.top = y;
-    setTimeout(() => stickToNearestSide(parseInt(x), parseInt(y)), 10);
-  } else {
-    btn.style.right = '20px';
-    btn.style.top = '20px';
-  }
-
-  btn.addEventListener('mousedown', startDrag);
-  link.addEventListener('click', function (e) {
-    if (hasMoved) {
-      e.preventDefault();
-      hasMoved = false;
-    }
-  });
-
-  function startDrag(e) {
-    isDragging = true;
-    hasMoved = false;
-
-    const rect = btn.getBoundingClientRect();
-    offsetX = e.clientX - rect.left;
-    offsetY = e.clientY - rect.top;
-
-    btn.style.cursor = 'grabbing';
-    btn.style.left = `${rect.left}px`;
-    btn.style.top = `${rect.top}px`;
-    btn.style.right = 'auto';
-
-    document.addEventListener('mousemove', drag);
-    document.addEventListener('mouseup', stopDrag);
-
-    e.preventDefault();
-  }
-
-  function drag(e) {
-    if (!isDragging) return;
-
-    const x = e.clientX - offsetX;
-    const y = e.clientY - offsetY;
-
-    btn.style.left = `${x}px`;
-    btn.style.top = `${y}px`;
-
-    hasMoved = true;
-  }
-
-  function stopDrag(e) {
-    if (!isDragging) return;
-
-    isDragging = false;
-    btn.style.cursor = 'move';
-
-    const rect = btn.getBoundingClientRect();
-    const x = rect.left;
-    const y = rect.top;
-
-    stickToNearestSide(x, y);
-    savePosition(x, y);
-
-    document.removeEventListener('mousemove', drag);
-    document.removeEventListener('mouseup', stopDrag);
-  }
-
-  function stickToNearestSide(x, y) {
-    const windowWidth = window.innerWidth;
-    const btnWidth = btn.offsetWidth;
-
-    if (x < windowWidth / 2) {
-      btn.style.left = '10px';
-      btn.style.right = 'auto';
-    } else {
-      btn.style.left = 'auto';
-      btn.style.right = '10px';
-    }
-
-    const windowHeight = window.innerHeight;
-    const btnHeight = btn.offsetHeight;
-
-    if (y < 0) {
-      btn.style.top = '10px';
-    } else if (y + btnHeight > windowHeight) {
-      btn.style.top = `${windowHeight - btnHeight - 10}px`;
-    } else {
-      btn.style.top = `${y}px`;
-    }
-  }
-
-  function savePosition(x, y) {
-    localStorage.setItem('floatingBtnPosition', JSON.stringify({
-      x: btn.style.left,
-      y: btn.style.top
-    }));
-  }
-
-  window.addEventListener('resize', function () {
     const savedPosition = localStorage.getItem('floatingBtnPosition');
     if (savedPosition) {
       const { x, y } = JSON.parse(savedPosition);
-      stickToNearestSide(parseInt(x), parseInt(y));
+      btn.style.left = x;
+      btn.style.top = y;
+      setTimeout(() => stickToNearestSide(parseInt(x), parseInt(y)), 10);
+    } else {
+      btn.style.right = '20px';
+      btn.style.top = '20px';
     }
+
+    // Eventos para mouse
+    btn.addEventListener('mousedown', startDrag);
+    document.addEventListener('mousemove', drag);
+    document.addEventListener('mouseup', stopDrag);
+
+    // Eventos para touch
+    btn.addEventListener('touchstart', startDragTouch, { passive: false });
+    document.addEventListener('touchmove', dragTouch, { passive: false });
+    document.addEventListener('touchend', stopDragTouch);
+
+    link.addEventListener('click', function (e) {
+      if (hasMoved) {
+        e.preventDefault();
+        hasMoved = false;
+      }
+    });
+
+    function startDrag(e) {
+      isDragging = true;
+      hasMoved = false;
+
+      const rect = btn.getBoundingClientRect();
+      offsetX = e.clientX - rect.left;
+      offsetY = e.clientY - rect.top;
+
+      btn.style.cursor = 'grabbing';
+      btn.style.left = `${rect.left}px`;
+      btn.style.top = `${rect.top}px`;
+      btn.style.right = 'auto';
+
+      e.preventDefault();
+    }
+
+    function drag(e) {
+      if (!isDragging) return;
+
+      const x = e.clientX - offsetX;
+      const y = e.clientY - offsetY;
+
+      btn.style.left = `${x}px`;
+      btn.style.top = `${y}px`;
+
+      hasMoved = true;
+    }
+
+    function stopDrag() {
+      if (!isDragging) return;
+
+      isDragging = false;
+      btn.style.cursor = 'move';
+
+      const rect = btn.getBoundingClientRect();
+      const x = rect.left;
+      const y = rect.top;
+
+      stickToNearestSide(x, y);
+      savePosition(x, y);
+    }
+
+    function startDragTouch(e) {
+      if (e.touches.length !== 1) return;
+
+      isDragging = true;
+      hasMoved = false;
+
+      const rect = btn.getBoundingClientRect();
+      offsetX = e.touches[0].clientX - rect.left;
+      offsetY = e.touches[0].clientY - rect.top;
+
+      btn.style.cursor = 'grabbing';
+      btn.style.left = `${rect.left}px`;
+      btn.style.top = `${rect.top}px`;
+      btn.style.right = 'auto';
+
+      e.preventDefault(); // evita scroll
+    }
+
+    function dragTouch(e) {
+      if (!isDragging || e.touches.length !== 1) return;
+
+      const x = e.touches[0].clientX - offsetX;
+      const y = e.touches[0].clientY - offsetY;
+
+      btn.style.left = `${x}px`;
+      btn.style.top = `${y}px`;
+
+      hasMoved = true;
+      e.preventDefault(); // evita scroll
+    }
+
+    function stopDragTouch() {
+      if (!isDragging) return;
+
+      isDragging = false;
+      btn.style.cursor = 'move';
+
+      const rect = btn.getBoundingClientRect();
+      const x = rect.left;
+      const y = rect.top;
+
+      stickToNearestSide(x, y);
+      savePosition(x, y);
+    }
+
+    function stickToNearestSide(x, y) {
+      const windowWidth = window.innerWidth;
+      const btnWidth = btn.offsetWidth;
+
+      if (x < windowWidth / 2) {
+        btn.style.left = '10px';
+        btn.style.right = 'auto';
+      } else {
+        btn.style.left = 'auto';
+        btn.style.right = '10px';
+      }
+
+      const windowHeight = window.innerHeight;
+      const btnHeight = btn.offsetHeight;
+
+      if (y < 0) {
+        btn.style.top = '10px';
+      } else if (y + btnHeight > windowHeight) {
+        btn.style.top = `${windowHeight - btnHeight - 10}px`;
+      } else {
+        btn.style.top = `${y}px`;
+      }
+    }
+
+    function savePosition(x, y) {
+      localStorage.setItem('floatingBtnPosition', JSON.stringify({
+        x: btn.style.left,
+        y: btn.style.top
+      }));
+    }
+
+    window.addEventListener('resize', function () {
+      const savedPosition = localStorage.getItem('floatingBtnPosition');
+      if (savedPosition) {
+        const { x, y } = JSON.parse(savedPosition);
+        stickToNearestSide(parseInt(x), parseInt(y));
+      }
+    });
   });
-});
-
 </script>
-