más intentos
This commit is contained in:
parent
1e2631d32e
commit
ff235ca40b
@ -34,17 +34,15 @@
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const btn = document.getElementById('floatingBtn');
|
||||
const link = document.getElementById('floatingBtnLink');
|
||||
let offsetX, offsetY;
|
||||
let isDragging = false;
|
||||
let hasMoved = false;
|
||||
let startClientX, startClientY;
|
||||
const moveThreshold = 10; // Aumenté el umbral para mejor experiencia táctil
|
||||
let tapTimer;
|
||||
const moveThreshold = 10;
|
||||
|
||||
// Cargar posición guardada
|
||||
const savedPosition = localStorage.getItem('floatingBtnPosition');
|
||||
@ -58,18 +56,20 @@
|
||||
btn.style.top = '20px';
|
||||
}
|
||||
|
||||
// Eventos para mouse
|
||||
// Mouse
|
||||
btn.addEventListener('mousedown', startInteraction);
|
||||
document.addEventListener('mousemove', moveInteraction);
|
||||
document.addEventListener('mouseup', endInteraction);
|
||||
|
||||
// Eventos para touch
|
||||
// Touch
|
||||
btn.addEventListener('touchstart', handleTouchStart, { passive: false });
|
||||
btn.addEventListener('touchmove', handleTouchMove, { passive: false });
|
||||
btn.addEventListener('touchend', handleTouchEnd, { passive: false });
|
||||
document.addEventListener('touchmove', handleTouchMove, { passive: false });
|
||||
|
||||
// Manejar el clic/enlace
|
||||
link.addEventListener('click', handleLinkClick);
|
||||
link.addEventListener('click', (e) => {
|
||||
if (hasMoved) e.preventDefault();
|
||||
hasMoved = false;
|
||||
});
|
||||
|
||||
function handleTouchStart(e) {
|
||||
e.preventDefault();
|
||||
@ -83,13 +83,6 @@
|
||||
|
||||
isDragging = false;
|
||||
hasMoved = false;
|
||||
|
||||
// Iniciar temporizador para el tap
|
||||
tapTimer = setTimeout(() => {
|
||||
if (!isDragging) {
|
||||
simulateClick(link);
|
||||
}
|
||||
}, 300); // 300ms es el tiempo típico para considerar un tap
|
||||
}
|
||||
|
||||
function handleTouchMove(e) {
|
||||
@ -103,10 +96,8 @@
|
||||
const deltaY = Math.abs(currentY - startClientY);
|
||||
|
||||
if (deltaX > moveThreshold || deltaY > moveThreshold) {
|
||||
clearTimeout(tapTimer);
|
||||
isDragging = true;
|
||||
hasMoved = true;
|
||||
|
||||
btn.style.left = `${currentX - offsetX}px`;
|
||||
btn.style.top = `${currentY - offsetY}px`;
|
||||
btn.style.right = 'auto';
|
||||
@ -115,150 +106,116 @@
|
||||
}
|
||||
|
||||
function handleTouchEnd(e) {
|
||||
clearTimeout(tapTimer);
|
||||
if (isDragging) {
|
||||
const rect = btn.getBoundingClientRect();
|
||||
stickToNearestSide(rect.left, rect.top);
|
||||
savePosition(rect.left, rect.top);
|
||||
} else {
|
||||
// Solo si NO se movió, redireccionar manualmente
|
||||
if (!hasMoved) {
|
||||
window.open(link.href, '_blank');
|
||||
}
|
||||
}
|
||||
|
||||
startClientX = null;
|
||||
startClientY = null;
|
||||
isDragging = false;
|
||||
hasMoved = false;
|
||||
}
|
||||
|
||||
function startInteraction(e) {
|
||||
e.preventDefault();
|
||||
const clientX = e.clientX;
|
||||
const clientY = e.clientY;
|
||||
|
||||
startClientX = clientX;
|
||||
startClientY = clientY;
|
||||
|
||||
const rect = btn.getBoundingClientRect();
|
||||
offsetX = clientX - rect.left;
|
||||
offsetY = clientY - rect.top;
|
||||
|
||||
btn.style.left = `${rect.left}px`;
|
||||
btn.style.top = `${rect.top}px`;
|
||||
btn.style.right = 'auto';
|
||||
btn.style.bottom = 'auto';
|
||||
|
||||
btn.style.cursor = 'grabbing';
|
||||
}
|
||||
|
||||
function moveInteraction(e) {
|
||||
if (!startClientX) return;
|
||||
|
||||
const clientX = e.clientX;
|
||||
const clientY = e.clientY;
|
||||
|
||||
const currentX = clientX - offsetX;
|
||||
const currentY = clientY - offsetY;
|
||||
|
||||
const deltaX = Math.abs(clientX - startClientX);
|
||||
const deltaY = Math.abs(clientY - startClientY);
|
||||
|
||||
if (deltaX > moveThreshold || deltaY > moveThreshold) {
|
||||
isDragging = true;
|
||||
hasMoved = true;
|
||||
}
|
||||
|
||||
if (isDragging) {
|
||||
btn.style.left = `${currentX}px`;
|
||||
btn.style.top = `${currentY}px`;
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function endInteraction() {
|
||||
startClientX = null;
|
||||
startClientY = null;
|
||||
|
||||
if (isDragging) {
|
||||
isDragging = false;
|
||||
btn.style.cursor = 'move';
|
||||
const rect = btn.getBoundingClientRect();
|
||||
stickToNearestSide(rect.left, rect.top);
|
||||
savePosition(rect.left, rect.top);
|
||||
}
|
||||
startClientX = null;
|
||||
startClientY = null;
|
||||
}
|
||||
|
||||
function simulateClick(element) {
|
||||
const clickEvent = new MouseEvent('click', {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
view: window
|
||||
});
|
||||
element.dispatchEvent(clickEvent);
|
||||
function stickToNearestSide(x, y) {
|
||||
const windowWidth = window.innerWidth;
|
||||
const windowHeight = window.innerHeight;
|
||||
const btnWidth = btn.offsetWidth;
|
||||
const btnHeight = btn.offsetHeight;
|
||||
const padding = 10;
|
||||
|
||||
if (x < windowWidth / 2 - btnWidth / 2) {
|
||||
btn.style.left = `${padding}px`;
|
||||
btn.style.right = 'auto';
|
||||
} else {
|
||||
btn.style.left = 'auto';
|
||||
btn.style.right = `${padding}px`;
|
||||
}
|
||||
|
||||
let newY = y;
|
||||
if (y < padding) newY = padding;
|
||||
else if (y + btnHeight > windowHeight - padding) newY = windowHeight - btnHeight - padding;
|
||||
btn.style.top = `${newY}px`;
|
||||
}
|
||||
|
||||
function handleLinkClick(e) {
|
||||
if (hasMoved) {
|
||||
e.preventDefault();
|
||||
}
|
||||
hasMoved = false;
|
||||
function savePosition(x, y) {
|
||||
localStorage.setItem('floatingBtnPosition', JSON.stringify({
|
||||
x: btn.style.left,
|
||||
y: btn.style.top
|
||||
}));
|
||||
}
|
||||
|
||||
// Funciones restantes igual que antes...
|
||||
function startInteraction(e) {
|
||||
// Prevenir el comportamiento por defecto del navegador (ej. arrastrar imágenes)
|
||||
e.preventDefault();
|
||||
|
||||
isDragging = false; // Resetear estado de arrastre
|
||||
hasMoved = false; // Resetear estado de movimiento
|
||||
|
||||
// Obtener las coordenadas iniciales del evento (mouse o touch)
|
||||
const clientX = e.clientX || e.touches[0].clientX;
|
||||
const clientY = e.clientY || e.touches[0].clientY;
|
||||
|
||||
startClientX = clientX;
|
||||
startClientY = clientY;
|
||||
|
||||
// Calcular el desplazamiento dentro del botón
|
||||
const rect = btn.getBoundingClientRect();
|
||||
offsetX = clientX - rect.left;
|
||||
offsetY = clientY - rect.top;
|
||||
|
||||
// Asegurar que la posición del botón se base en left/top para el arrastre
|
||||
btn.style.left = `${rect.left}px`;
|
||||
btn.style.top = `${rect.top}px`;
|
||||
btn.style.right = 'auto'; // Desactivar 'right' para evitar conflictos
|
||||
btn.style.bottom = 'auto'; // Desactivar 'bottom' si estuviera activo
|
||||
|
||||
btn.style.cursor = 'grabbing'; // Cambiar cursor mientras se "agarra"
|
||||
}
|
||||
|
||||
function moveInteraction(e) {
|
||||
if (!startClientX) return; // Si no hay inicio de interacción, salimos
|
||||
|
||||
const clientX = e.clientX || e.touches[0].clientX;
|
||||
const clientY = e.clientY || e.touches[0].clientY;
|
||||
|
||||
const currentX = clientX - offsetX;
|
||||
const currentY = clientY - offsetY;
|
||||
|
||||
// Detectar si el movimiento supera el umbral
|
||||
const deltaX = Math.abs(clientX - startClientX);
|
||||
const deltaY = Math.abs(clientY - startClientY);
|
||||
|
||||
if (deltaX > moveThreshold || deltaY > moveThreshold) {
|
||||
isDragging = true; // Confirmamos que es un arrastre
|
||||
hasMoved = true; // Se ha movido significativamente
|
||||
}
|
||||
|
||||
if (isDragging) {
|
||||
// Mover el botón
|
||||
btn.style.left = `${currentX}px`;
|
||||
btn.style.top = `${currentY}px`;
|
||||
// Prevenir el scroll de la página solo si estamos arrastrando
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function endInteraction() {
|
||||
// Resetear las coordenadas iniciales del toque
|
||||
startClientX = null;
|
||||
startClientY = null;
|
||||
|
||||
if (isDragging) {
|
||||
isDragging = false; // Finalizar el estado de arrastre
|
||||
btn.style.cursor = 'move'; // Restaurar cursor
|
||||
|
||||
const rect = btn.getBoundingClientRect();
|
||||
stickToNearestSide(rect.left, rect.top); // Anclar a la posición final
|
||||
savePosition(rect.left, rect.top); // Guardar la posición
|
||||
}
|
||||
// hasMoved se reseteará en el evento 'click' del enlace o en la siguiente 'startInteraction'
|
||||
}
|
||||
|
||||
|
||||
function stickToNearestSide(x, y) {
|
||||
const windowWidth = window.innerWidth;
|
||||
const windowHeight = window.innerHeight;
|
||||
const btnWidth = btn.offsetWidth;
|
||||
const btnHeight = btn.offsetHeight;
|
||||
const padding = 10; // Espacio de separación de los bordes
|
||||
|
||||
// Anclar al lado izquierdo o derecho
|
||||
if (x < windowWidth / 2 - btnWidth / 2) { // Considera el centro del botón
|
||||
btn.style.left = `${padding}px`;
|
||||
btn.style.right = 'auto';
|
||||
} else {
|
||||
btn.style.left = 'auto';
|
||||
btn.style.right = `${padding}px`;
|
||||
}
|
||||
|
||||
// Asegurarse de que el botón no salga por arriba o por abajo
|
||||
let newY = y;
|
||||
if (y < padding) {
|
||||
newY = padding;
|
||||
} else if (y + btnHeight > windowHeight - padding) {
|
||||
newY = windowHeight - btnHeight - padding;
|
||||
}
|
||||
btn.style.top = `${newY}px`;
|
||||
}
|
||||
|
||||
function savePosition(x, y) {
|
||||
localStorage.setItem('floatingBtnPosition', JSON.stringify({
|
||||
x: btn.style.left,
|
||||
y: btn.style.top
|
||||
}));
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
const saved = localStorage.getItem('floatingBtnPosition');
|
||||
if (saved) {
|
||||
const { x, y } = JSON.parse(saved);
|
||||
// Volver a anclar el botón a su lado más cercano según la nueva ventana
|
||||
stickToNearestSide(parseInt(x), parseInt(y));
|
||||
} else {
|
||||
// Si no hay posición guardada, anclar a la posición por defecto
|
||||
stickToNearestSide(btn.getBoundingClientRect().left, btn.getBoundingClientRect().top);
|
||||
}
|
||||
});
|
||||
|
||||
const saved = localStorage.getItem('floatingBtnPosition');
|
||||
if (saved) {
|
||||
const { x, y } = JSON.parse(saved);
|
||||
stickToNearestSide(parseInt(x), parseInt(y));
|
||||
} else {
|
||||
stickToNearestSide(btn.getBoundingClientRect().left, btn.getBoundingClientRect().top);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user