Vamos a ajustar el código para que funcione correctamente y permita el arrastre hacia arriba y hacia abajo, junto con el registro adecuado de las alertas.
### Corrección del Código
Aquí tienes el código actualizado que debería solucionar el problema de permitir el arrastre hacia arriba:
JavaScript:
document.addEventListener("DOMContentLoaded", () => {
let isDragging = false;
let startY;
let currentDiv = null;
const divHeight = 200; // Altura del div
const alertThreshold = divHeight * 0.5; // Umbral del 50%
let previousBottom = 0; // Para comparación de la posición anterior
const startDrag = (e) => {
isDragging = true;
startY = e.touches ? e.touches[0].clientY : e.clientY;
previousBottom = parseInt(window.getComputedStyle(currentDiv).bottom) || 0; // Guardamos la posición inicial
};
const drag = (e) => {
if (isDragging && currentDiv) {
const y = e.touches ? e.touches[0].clientY : e.clientY;
const distance = startY - y; // Calcular la distancia arrastrada
const currentBottom = previousBottom + distance;
const subBody = document.querySelector('.subody');
const cleamValue = subBody.getAttribute('cleam');
// Permitir movimiento según el valor de cleam
if (cleamValue === null || cleamValue === '0') {
// Solo permitir arrastrar hacia arriba
if (distance > 0) {
currentDiv.style.bottom = currentBottom + 'px'; // Ajuste de la posición
}
} else {
// Permitir movimiento normal (hacia arriba y hacia abajo)
currentDiv.style.bottom = currentBottom + 'px'; // Ajuste de la posición
}
startY = y; // Actualizar startY para el próximo movimiento
}
};
const endDrag = () => {
isDragging = false;
if (currentDiv) {
const currentBottom = parseInt(window.getComputedStyle(currentDiv).bottom) || 0;
// Comprobar si se ha movido el div más del umbral hacia arriba
if (currentBottom >= previousBottom + alertThreshold) {
alert("¡Subió!");
previousBottom = currentBottom; // Actualizar previousBottom
}
// Comprobar si se ha movido el div más del umbral hacia abajo
else if (currentBottom <= previousBottom - alertThreshold) {
alert("¡Bajó!");
previousBottom = currentBottom; // Actualizar previousBottom
}
currentDiv = null; // Reiniciar referencia
}
};
// Controladores de eventos para arrastre
document.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('drag-handle')) {
currentDiv = e.target.closest('.metagets'); // Asignar el div padre
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
document.addEventListener('touchstart', (e) => {
if (e.target.classList.contains('drag-handle')) {
currentDiv = e.target.closest('.metagets');
startDrag(e);
}
});
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
});
### Ajustes Clave
1.
Permitir Arrastre hacia Arriba: La lógica para permitir el arrastre hacia arriba se ha mantenido al comprobar si
distance > 0, lo que indica que se está arrastrando hacia arriba.
2.
Ajuste en la posición: Asegúrate de que el valor de
currentBottom se asigne correctamente para que refleje el movimiento del elemento en la interfaz.
### Prueba
Prueba el código nuevamente. Si todavía encuentras problemas al arrastrar hacia arriba, házmelo saber para hacer más ajustes. ¡Estoy aquí para ayudar!
document.addEventListener("DOMContentLoaded", () => {
let isDragging = false;
let startY;
let currentDiv = null;
const divHeight = 200; // Altura del div
const alertThreshold = divHeight * 0.5; // Umbral del 50%
let previousBottom = 0; // Para comparación de la posición anterior
const startDrag = (e) => {
isDragging = true;
startY = e.touches ? e.touches[0].clientY : e.clientY;
};
const drag = (e) => {
if (isDragging && currentDiv) {
const y = e.touches ? e.touches[0].clientY : e.clientY;
const distance = startY - y; // Calcular la distancia arrastrada
const currentBottom = parseInt(window.getComputedStyle(currentDiv).bottom) || 0;
const subBody = document.querySelector('subody');
const cleamValue = subBody.getAttribute('cleam');
// Permitir movimiento según el valor de cleam
if (cleamValue === null || cleamValue === '0') {
// Solo permitir arrastrar hacia arriba
if (distance > 0) {
currentDiv.style.bottom = (currentBottom + distance) + 'px';
}
} else {
// Permitir movimiento normal (hacia arriba y hacia abajo)
currentDiv.style.bottom = (currentBottom + distance) + 'px';
}
startY = y; // Actualizar startY para el próximo movimiento
}
};
const endDrag = () => {
isDragging = false;
if (currentDiv) {
const currentBottom = parseInt(window.getComputedStyle(currentDiv).bottom) || 0;
// Comprobar si se ha movido el div más del umbral hacia arriba
if (currentBottom >= previousBottom + alertThreshold) {
alert("¡Subió!");
previousBottom = currentBottom; // Actualizar previousBottom
}
// Comprobar si se ha movido el div más del umbral hacia abajo
else if (currentBottom <= previousBottom - alertThreshold) {
alert("¡Bajó!");
previousBottom = currentBottom; // Actualizar previousBottom
}
// Resetear la posición para permitir futuros movimientos
currentDiv.style.bottom = "0px";
currentDiv = null; // Reiniciar referencia
}
};
// Controladores de eventos para arrastre
document.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('drag-handle')) {
currentDiv = e.target.closest('.metagets'); // Asignar el div padre
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
document.addEventListener('touchstart', (e) => {
if (e.target.classList.contains('drag-handle')) {
currentDiv = e.target.closest('.metagets');
startDrag(e);
}
});
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
});
ajustame este codigo, este si me permite subir
