try fix drag btn 1

This commit is contained in:
David Itehua Xalamihua 2025-05-21 20:40:08 -06:00
parent ef5e2622f8
commit c92e8497e1

View File

@ -50,6 +50,10 @@
</div> </div>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const btn = document.getElementById('floatingBtn'); const btn = document.getElementById('floatingBtn');
@ -69,7 +73,16 @@
btn.style.top = '20px'; btn.style.top = '20px';
} }
// Eventos para mouse
btn.addEventListener('mousedown', startDrag); 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) { link.addEventListener('click', function (e) {
if (hasMoved) { if (hasMoved) {
e.preventDefault(); e.preventDefault();
@ -90,9 +103,6 @@
btn.style.top = `${rect.top}px`; btn.style.top = `${rect.top}px`;
btn.style.right = 'auto'; btn.style.right = 'auto';
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);
e.preventDefault(); e.preventDefault();
} }
@ -108,7 +118,7 @@
hasMoved = true; hasMoved = true;
} }
function stopDrag(e) { function stopDrag() {
if (!isDragging) return; if (!isDragging) return;
isDragging = false; isDragging = false;
@ -120,9 +130,51 @@
stickToNearestSide(x, y); stickToNearestSide(x, y);
savePosition(x, y); savePosition(x, y);
}
document.removeEventListener('mousemove', drag); function startDragTouch(e) {
document.removeEventListener('mouseup', stopDrag); 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) { function stickToNearestSide(x, y) {
@ -163,7 +215,5 @@
stickToNearestSide(parseInt(x), parseInt(y)); stickToNearestSide(parseInt(x), parseInt(y));
} }
}); });
}); });
</script> </script>