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>
<script>
document.addEventListener('DOMContentLoaded', function () {
const btn = document.getElementById('floatingBtn');
@ -69,7 +73,16 @@
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();
@ -90,9 +103,6 @@
btn.style.top = `${rect.top}px`;
btn.style.right = 'auto';
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag);
e.preventDefault();
}
@ -108,7 +118,7 @@
hasMoved = true;
}
function stopDrag(e) {
function stopDrag() {
if (!isDragging) return;
isDragging = false;
@ -120,9 +130,51 @@
stickToNearestSide(x, y);
savePosition(x, y);
}
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', stopDrag);
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) {
@ -164,6 +216,4 @@
}
});
});
</script>