Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
Este error se produce porque el script se está ejecutando antes de que el
<div> se haya creado en el DOM. Puedes solucionar esto asegurándote de que el código JavaScript se ejecute después de que el DOM esté completamente cargado. Una forma de hacerlo es colocando el script justo antes de la etiqueta de cierre </body>. <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Div Arrastrable Solo Arriba con Alerta al Soltar</title>
<style>
body {
margin: 0;
height: 100vh; /* Altura completa de la ventana */
overflow: hidden; /* Evitar scroll */
}
#miDiv {
width: 100px;
height: 100px;
background-color: blue;
position: absolute; /* Necesario para moverlo */
cursor: move; /* Cambia el cursor al arrastrar */
bottom: 0; /* Comienza en la parte inferior de la ventana */
}
</style>
</head>
<body>
<div id="miDiv"></div>
<script>
const miDiv = document.getElementById("miDiv");
let isDragging = false;
let startY;
const divHeight = 100; // Altura del div en píxeles
const alertThreshold = divHeight * 0.5; // 50% de la altura del div
let movedDistance = 0; // Distancia movida
const startDrag = (e) => {
isDragging = true;
startY = e.touches ? e.touches[0].clientY : e.clientY; // Posición inicial del mouse o toque
};
const drag = (e) => {
if (isDragging) {
const y = e.touches ? e.touches[0].clientY : e.clientY; // Posición actual del mouse o toque
const distance = startY - y; // Distancia movida hacia arriba
const currentBottom = parseInt(window.getComputedStyle(miDiv).bottom);
movedDistance = Math.max(0, currentBottom + distance); // Mueve el div hacia arriba
miDiv.style.bottom = movedDistance + 'px'; // Mover el div
startY = y; // Actualiza la posición inicial
}
};
const endDrag = () => {
isDragging = false; // Detener el arrastre
// Verifica si se alcanzó el 50% de la altura al soltar
if (movedDistance >= alertThreshold) {
alert("¡Has subido el div un 50%!");
}
};
// Eventos para mouse
miDiv.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
// Eventos para touch
miDiv.addEventListener('touchstart', startDrag);
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
</script>
</body>
</html><script> se encuentra al final del cuerpo del documento, lo que garantiza que el DOM está completamente cargado antes de que se ejecute el código. Esto evita el error de intentar acceder a un elemento que no existe todavía.<div> hacia arriba y recibir la alerta correctamente cuando lo sueltes después de haber subido un 50%. Copia este código y pruébalo en tu navegador. Si sigues teniendo problemas o tienes más preguntas, ¡estaré aquí para ayudarte!puedes hacer que funcione con los nuevos divs agregados en el dom?
Claro, para hacer que el código funcione con nuevos
<div> que se agreguen dinámicamente al DOM, puedes usar eventos de delegación. Esto significa que en lugar de añadir los event listeners directamente al <div>[/ICODE>, los agregarás al documento o a un contenedor superior, y luego comprobarás si el elemento que fue interactuado es un [ICODE]<div>[/ICODE> arrastrable.
Aquí tienes un ejemplo que permite arrastrar cualquier nuevo [ICODE]<div> que agregues al DOM:<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs Arrastrables Dinámicos</title>
<style>
body {
margin: 0;
height: 100vh; /* Altura completa de la ventana */
overflow: hidden; /* Evitar scroll */
position: relative; /* Para posicionar los divs hijos */
}
.miDiv {
width: 100px;
height: 100px;
background-color: blue;
position: absolute; /* Necesario para moverlos */
cursor: move; /* Cambia el cursor al arrastrar */
bottom: 0; /* Comienza en la parte inferior de la ventana */
}
</style>
</head>
<body>
<button id="addDiv">Agregar Div</button>
<script>
let isDragging = false;
let startY;
let movedDistance = 0; // Distancia movida
let currentDiv = null; // Referencia al div actual arrastrable
const divHeight = 100; // Altura del div en píxeles
const alertThreshold = divHeight * 0.5; // 50% de la altura del div
const startDrag = (e) => {
isDragging = true;
currentDiv = e.target;
startY = e.touches ? e.touches[0].clientY : e.clientY; // Posición inicial del mouse o toque
};
const drag = (e) => {
if (isDragging && currentDiv) {
const y = e.touches ? e.touches[0].clientY : e.clientY; // Posición actual del mouse o toque
const distance = startY - y; // Distancia movida hacia arriba
const currentBottom = parseInt(window.getComputedStyle(currentDiv).bottom);
movedDistance = Math.max(0, currentBottom + distance); // Mueve el div hacia arriba
currentDiv.style.bottom = movedDistance + 'px'; // Mover el div
startY = y; // Actualiza la posición inicial
}
};
const endDrag = () => {
isDragging = false; // Detener el arrastre
// Verifica si se alcanzó el 50% de la altura al soltar
if (movedDistance >= alertThreshold) {
alert("¡Has subido el div un 50%!");
}
currentDiv = null; // Resetea la referencia
};
// Eventos de Delegación
document.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('miDiv')) {
startDrag(e);
}
});
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
// Eventos para touch
document.addEventListener('touchstart', (e) => {
if (e.target.classList.contains('miDiv')) {
startDrag(e);
}
});
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
// Agregar nuevo div
document.getElementById('addDiv').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'miDiv';
document.body.appendChild(newDiv); // Agregar nuevo div al DOM
});
</script>
</body>
</html>.miDiv para aplicar estilos a todos los divs arrastrables..miDiv, se inicia el arrastre..miDiv para que sean arrastrables.<div> y arrastrarlos individualmente, recibiendo alertas en función de su posición al soltarlos. Prueba este código y si necesitas más ayuda, ¡aquí estoy!ahora no me funciona, creo que porque dentro del div hay otros objetos como iframes etc
Si los nuevos
<div> contienen otros elementos (como iframes) que capturan los eventos del mouse o táctil, es posible que no se disparen correctamente los eventos de mousedown, mousemove, etc.iframe o cualquier otro contenido dentro del <div> no interfiera. Una forma de hacerlo es manejar los eventos en el document y verificar si el objetivo del evento (el elemento que disparó el evento) es el <div> arrastrable.<div> arrastrables, sin que su contenido bloquee los eventos:<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs Arrastrables con Contenido</title>
<style>
body {
margin: 0;
height: 100vh; /* Altura completa de la ventana */
overflow: hidden; /* Evitar scroll */
position: relative; /* Para posicionar los divs hijos */
}
.miDiv {
width: 100px;
height: 100px;
background-color: blue;
position: absolute; /* Necesario para moverlos */
cursor: move; /* Cambia el cursor al arrastrar */
bottom: 0; /* Comienza en la parte inferior de la ventana */
}
/* Esta clase permite que los iframes y otros elementos queden por encima */
.content {
position: relative;
z-index: 1; /* Asegúrate de que el contenido esté encima del fondo */
}
</style>
</head>
<body>
<button id="addDiv">Agregar Div</button>
<script>
let isDragging = false;
let startY;
let movedDistance = 0; // Distancia movida
let currentDiv = null; // Referencia al div actual arrastrable
const divHeight = 100; // Altura del div en píxeles
const alertThreshold = divHeight * 0.5; // 50% de la altura del div
const startDrag = (e) => {
if (e.target.classList.contains('miDiv')) {
isDragging = true;
currentDiv = e.target;
startY = e.touches ? e.touches[0].clientY : e.clientY; // Posición inicial del mouse o toque
}
};
const drag = (e) => {
if (isDragging && currentDiv) {
const y = e.touches ? e.touches[0].clientY : e.clientY; // Posición actual del mouse o toque
const distance = startY - y; // Distancia movida hacia arriba
const currentBottom = parseInt(window.getComputedStyle(currentDiv).bottom);
movedDistance = Math.max(0, currentBottom + distance); // Mueve el div hacia arriba
currentDiv.style.bottom = movedDistance + 'px'; // Mover el div
startY = y; // Actualiza la posición inicial
}
};
const endDrag = () => {
isDragging = false; // Detener el arrastre
// Verifica si se alcanzó el 50% de la altura al soltar
if (movedDistance >= alertThreshold) {
alert("¡Has subido el div un 50%!");
}
currentDiv = null; // Resetea la referencia
};
// Eventos de Delegación
document.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
// Eventos para touch
document.addEventListener('touchstart', startDrag);
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
// Agregar nuevo div
document.getElementById('addDiv').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'miDiv';
newDiv.innerHTML = '<div class="content">Contenido aquí</div>'; // Contenido dentro del div
document.body.appendChild(newDiv); // Agregar nuevo div al DOM
});
</script>
</body>
</html><div>, debe usar una clase (.content) que tenga un z-index apropiado si es necesario.<div> y mantener la funcionalidad de arrastre, independientemente de lo que contengan. Si sigues teniendo problemas, ¡no dudes en preguntar!sigue igual
Entiendo. Si hay elementos como iframes en el
<div> que capturan los eventos y no permiten que el arrastre funcione, deberías manejar los eventos de una manera que no interfiera con el funcionamiento del contenido dentro de esos divs. <div>. Vamos a asegurarnos de que solo el evento de arrastre se inicie si el clic se produce en un área que no es parte del iframe.<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs Arrastrables con Iframes</title>
<style>
body {
margin: 0;
height: 100vh; /* Altura completa de la ventana */
overflow: hidden; /* Evitar scroll */
position: relative; /* Para posicionar los divs hijos */
}
.miDiv {
width: 200px;
height: 200px;
background-color: blue;
position: absolute; /* Necesario para moverlos */
cursor: move; /* Cambia el cursor al arrastrar */
bottom: 0; /* Comienza en la parte inferior de la ventana */
}
.content {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1; /* Asegurarse de que el contenido esté arriba */
}
</style>
</head>
<body>
<button id="addDiv">Agregar Div</button>
<script>
let isDragging = false;
let startY;
let movedDistance = 0; // Distancia movida
let currentDiv = null; // Referencia al div actual arrastrable
const divHeight = 200; // Altura del div en píxeles
const alertThreshold = divHeight * 0.5; // 50% de la altura del div
const startDrag = (e) => {
if (currentDiv && e.target === currentDiv) { // Solo iniciar arrastre si clic en el div
isDragging = true;
startY = e.touches ? e.touches[0].clientY : e.clientY; // Posición inicial
}
};
const drag = (e) => {
if (isDragging && currentDiv) {
const y = e.touches ? e.touches[0].clientY : e.clientY; // Posición actual
const distance = startY - y; // Distancia movida hacia arriba
const currentBottom = parseInt(window.getComputedStyle(currentDiv).bottom);
movedDistance = Math.max(0, currentBottom + distance); // Mueve el div hacia arriba
currentDiv.style.bottom = movedDistance + 'px'; // Mover el div
startY = y; // Actualiza la posición inicial
}
};
const endDrag = () => {
isDragging = false; // Detener el arrastre
// Verifica si se alcanzó el 50% de la altura al soltar
if (movedDistance >= alertThreshold) {
alert("¡Has subido el div un 50%!");
}
currentDiv = null; // Resetea la referencia
};
// Eventos de Delegación
document.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('miDiv')) {
currentDiv = e.target; // Guarda el div actual
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
// Eventos para touch
document.addEventListener('touchstart', (e) => {
if (e.target.classList.contains('miDiv')) {
currentDiv = e.target; // Guarda el div actual
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
// Agregar nuevo div
document.getElementById('addDiv').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'miDiv';
newDiv.innerHTML = `
<iframe class="content" src="https://www.example.com" frameborder="0"></iframe>
<div class="content">Contenido adicional aquí</div>
`; // Contenido dentro del div
document.body.appendChild(newDiv); // Agregar nuevo div al DOM
});
</script>
</body>
</html>div, evitando que el iframe active el arrastre.<div> agrega un iframe y otro contenido de forma que se vean como parte del mismo, pero el arrastre funciona sin problemas.target sea el div arrastrable, permitiendo el control del arrastre mientras se evita el problema con el iframe.<div>, incluso si contienen iframes o cualquier otro contenido sin problemas. Si continúas experimentando dificultades, por favor házmelo saber. ¡Estoy aquí para ayudar!no me funciona cuando arrastro desde un elemento
El error que estás encontrando indica que el script está intentando agregar un event listener a un elemento que no existe en el DOM en el momento en que se ejecuta el código. Esto suele ocurrir cuando el JavaScript se ejecuta antes de que el DOM esté completamente cargado.
<body>, o envolviendo tu código dentro de un event listener para el evento DOMContentLoaded.<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs Arrastrables con Iframes</title>
<style>
body {
margin: 0;
height: 100vh; /* Altura completa de la ventana */
overflow: hidden; /* Evitar scroll */
position: relative; /* Para posicionar los divs hijos */
}
.miDiv {
width: 200px;
height: 200px;
background-color: blue;
position: absolute; /* Necesario para moverlos */
cursor: move; /* Cambia el cursor al arrastrar */
bottom: 0; /* Comienza en la parte inferior de la ventana */
}
.content {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1; /* Asegurarse de que el contenido esté arriba */
}
</style>
</head>
<body>
<button id="addDiv">Agregar Div</button>
<script>
document.addEventListener("DOMContentLoaded", () => {
let isDragging = false;
let startY;
let movedDistance = 0; // Distancia movida
let currentDiv = null; // Referencia al div actual arrastrable
const divHeight = 200; // Altura del div en píxeles
const alertThreshold = divHeight * 0.5; // 50% de la altura del div
const startDrag = (e) => {
if (currentDiv) {
isDragging = true;
startY = e.touches ? e.touches[0].clientY : e.clientY; // Posición inicial
}
};
const drag = (e) => {
if (isDragging && currentDiv) {
const y = e.touches ? e.touches[0].clientY : e.clientY; // Posición actual
const distance = startY - y; // Distancia movida hacia arriba
const currentBottom = parseInt(window.getComputedStyle(currentDiv).bottom);
movedDistance = Math.max(0, currentBottom + distance); // Mueve el div hacia arriba
currentDiv.style.bottom = movedDistance + 'px'; // Mover el div
startY = y; // Actualiza la posición inicial
}
};
const endDrag = () => {
isDragging = false; // Detener el arrastre
// Verifica si se alcanzó el 50% de la altura al soltar
if (movedDistance >= alertThreshold) {
alert("¡Has subido el div un 50%!");
}
currentDiv = null; // Resetea la referencia
};
// Eventos de Delegación
document.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('miDiv')) {
currentDiv = e.target; // Guarda el div actual
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
// Eventos para touch
document.addEventListener('touchstart', (e) => {
if (e.target.classList.contains('miDiv')) {
currentDiv = e.target; // Guarda el div actual
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
// Agregar nuevo div
document.getElementById('addDiv').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'miDiv';
newDiv.innerHTML = `
<iframe class="content" src="https://www.example.com" frameborder="0"></iframe>
<div class="content">Contenido adicional aquí</div>
`; // Contenido dentro del div
document.body.appendChild(newDiv); // Agregar nuevo div al DOM
});
});
</script>
</body>
</html>DOMContentLoaded: Envolvimos todo el código JavaScript en un arreglo para el evento DOMContentLoaded. Esto asegura que el DOM esté completamente cargado antes de que se intente acceder a cualquier elemento.<div> incluso si contiene iframes.<div> sin que se produzcan errores porque el DOM no está completamente cargado. Si sigues enfrentando problemas o si algo no funciona como esperabas, no dudes en preguntar. ¡Estoy aquí para ayudar!sigue sin funcionar 🙁
Lamento que sigas teniendo problemas. Vamos a abordar el arrastre de elementos más específicamente para manejar contenidos complejos, como iframes, y asegurarnos de que la funcionalidad de arrastre funcione correctamente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs Arrastrables con Iframes</title>
<style>
body {
margin: 0;
height: 100vh; /* Altura completa de la ventana */
overflow: hidden; /* Evitar scroll */
position: relative; /* Para posicionar los divs hijos */
}
.miDiv {
width: 200px;
height: 200px;
background-color: blue;
position: absolute; /* Necesario para moverlos */
cursor: move; /* Cambia el cursor al arrastrar */
bottom: 0; /* Comienza en la parte inferior de la ventana */
}
.content {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1; /* Para que el contenido esté encima */
}
.drag-handle {
height: 30px; /* Area de agarre */
background-color: rgba(255, 255, 255, 0.5); /* Color semitransparente */
cursor: move; /* Cursor de mover */
z-index: 2; /* Asegúrate que esté por encima del contenido */
}
</style>
</head>
<body>
<button id="addDiv">Agregar Div</button>
<script>
document.addEventListener("DOMContentLoaded", () => {
let isDragging = false;
let startY;
let movedDistance = 0; // Distancia movida
let currentDiv = null; // Referencia al div actual arrastrable
const divHeight = 200; // Altura del div en píxeles
const alertThreshold = divHeight * 0.5; // 50% de la altura del div
const startDrag = (e) => {
isDragging = true;
startY = e.touches ? e.touches[0].clientY : e.clientY; // Almacena la posición inicial
};
const drag = (e) => {
if (isDragging && currentDiv) {
const y = e.touches ? e.touches[0].clientY : e.clientY; // Posición actual
const distance = startY - y; // Distancia movida hacia arriba
const currentBottom = parseInt(window.getComputedStyle(currentDiv).bottom);
movedDistance = Math.max(0, currentBottom + distance); // Mueve el div hacia arriba
currentDiv.style.bottom = movedDistance + 'px'; // Mueve el div
startY = y; // Actualiza la posición inicial
}
};
const endDrag = () => {
isDragging = false; // Detener el arrastre
// Verifica si se alcanzó el 50% de la altura al soltar
if (movedDistance >= alertThreshold) {
alert("¡Has subido el div un 50%!");
}
currentDiv = null; // Resetea la referencia
};
// Eventos de Delegación para el área de agarre
document.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('drag-handle')) {
currentDiv = e.target.parentElement; // Asigna el div padre
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
// Eventos para touch
document.addEventListener('touchstart', (e) => {
if (e.target.classList.contains('drag-handle')) {
currentDiv = e.target.parentElement; // Asigna el div padre
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
// Agregar nuevo div
document.getElementById('addDiv').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'miDiv';
newDiv.innerHTML = `
<div class="drag-handle">Arrastra desde aquí</div>
<iframe class="content" src="https://www.example.com" frameborder="0"></iframe>
`; // Contenido dentro del div
document.body.appendChild(newDiv); // Agregar nuevo div al DOM
});
});
</script>
</body>
</html>.drag-handle que actúa como área de agarre. Este es el único lugar donde puedes hacer clic y arrastrar el div.puedes hacerlo asi
Claro, puedo ajustar el código para usar el HTML que proporcionaste para el área de agarre. También lo integraré con la funcionalidad de arrastre existente. Aquí tienes el código completo con tu especificación para el área de agarre.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs Arrastrables con Iframes</title>
<style>
body {
margin: 0;
height: 100vh; /* Altura completa de la ventana */
overflow: hidden; /* Evitar scroll */
position: relative; /* Para posicionar los divs hijos */
}
.miDiv {
width: 300px; /* Ajusta el ancho según sea necesario */
height: 200px;
background-color: blue;
position: absolute; /* Necesario para moverlos */
cursor: move; /* Cambia el cursor al arrastrar */
bottom: 0; /* Comienza en la parte inferior de la ventana */
display: flex;
flex-direction: column;
}
.content {
position: relative; /* Para asegurar que el contenido esté en su lugar */
width: 100%;
height: 100%;
z-index: 1; /* Para que el contenido esté encima */
}
.drag-handle {
background: gold;
padding: 10px; /* Espaciado para el área de agarre */
width: 100%; /* Ancho completo */
text-align: center; /* Centrar el texto */
cursor: move; /* Cursor de mover */
z-index: 2; /* Asegúrate que esté por encima del contenido */
}
</style>
</head>
<body>
<button id="addDiv">Agregar Div</button>
<script>
document.addEventListener("DOMContentLoaded", () => {
let isDragging = false;
let startY;
let movedDistance = 0; // Distancia movida
let currentDiv = null; // Referencia al div actual arrastrable
const divHeight = 200; // Altura del div en píxeles
const alertThreshold = divHeight * 0.5; // 50% de la altura del div
const startDrag = (e) => {
isDragging = true;
startY = e.touches ? e.touches[0].clientY : e.clientY; // Almacena la posición inicial
};
const drag = (e) => {
if (isDragging && currentDiv) {
const y = e.touches ? e.touches[0].clientY : e.clientY; // Posición actual
const distance = startY - y; // Distancia movida hacia arriba
const currentBottom = parseInt(window.getComputedStyle(currentDiv).bottom);
movedDistance = Math.max(0, currentBottom + distance); // Mueve el div hacia arriba
currentDiv.style.bottom = movedDistance + 'px'; // Mueve el div
startY = y; // Actualiza la posición inicial
}
};
const endDrag = () => {
isDragging = false; // Detener el arrastre
// Verifica si se alcanzó el 50% de la altura al soltar
if (movedDistance >= alertThreshold) {
alert("¡Has subido el div un 50%!");
}
currentDiv = null; // Resetea la referencia
};
// Eventos de Delegación para el área de agarre
document.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('drag-handle')) {
currentDiv = e.target.closest('.miDiv'); // Asigna el div padre
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
// Eventos para touch
document.addEventListener('touchstart', (e) => {
if (e.target.classList.contains('drag-handle')) {
currentDiv = e.target.closest('.miDiv'); // Asigna el div padre
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
// Agregar nuevo div
document.getElementById('addDiv').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'miDiv';
newDiv.innerHTML = `
<div style="z-index:1; float:left; background:red; position:absolute; justify-content:center; justify-items:center; bottom:50px; width:100%; display:flex;">
<span class="drag-handle">Arrastra desde aquí</span>
</div>
<iframe class="content" src="https://www.example.com" frameborder="0"></iframe>
`; // Contenido dentro del div
document.body.appendChild(newDiv); // Agregar nuevo div al DOM
});
});
</script>
</body>
</html>.drag-handle).document.addEventListener("DOMContentLoaded", () => {
¡Claro! Para hacer que el div se mueva más rápido, puedes multiplicar la distancia calculada por un factor en la función
drag. A continuación, he ajustado el código para que el movimiento sea un 1.5 veces más rápido. Aquí está la modificación:<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs Arrastrables con Movimiento Rápido</title>
<style>
body {
margin: 0;
height: 100vh; /* Altura completa de la ventana */
overflow: hidden; /* Evitar scroll */
position: relative; /* Para posicionar los divs hijos */
}
.metagets {
width: 300px; /* Ajusta el ancho según sea necesario */
height: 200px;
background-color: blue;
position: absolute; /* Necesario para moverlos */
bottom: 0; /* Comienza en la parte inferior de la ventana */
display: flex;
flex-direction: column;
}
.content {
position: relative; /* Para asegurar que el contenido esté en su lugar */
width: 100%;
height: 100%;
z-index: 1; /* Para que el contenido esté encima */
}
.drag-handle {
background: gold;
padding: 10px; /* Espaciado para el área de agarre */
width: 100%; /* Ancho completo */
text-align: center; /* Centrar el texto */
cursor: move; /* Cursor de mover */
z-index: 2; /* Asegúrate que esté por encima del contenido */
}
</style>
</head>
<body>
<button id="addDiv">Agregar Div</button>
<script>
document.addEventListener("DOMContentLoaded", () => {
let isDragging = false;
let startY;
let movedDistance = 0; // Distancia movida
let currentDiv = null; // Referencia al div actual arrastrable
const divHeight = 200; // Altura del div en píxeles
const alertThreshold = divHeight * 0.5; // 50% de la altura del div
const speedFactor = 1.5; // Ajusta la velocidad de movimiento
const startDrag = (e) => {
isDragging = true;
startY = e.touches ? e.touches[0].clientY : e.clientY; // Almacena la posición inicial
};
const drag = (e) => {
if (isDragging && currentDiv) {
const y = e.touches ? e.touches[0].clientY : e.clientY; // Posición actual
const distance = startY - y; // Distancia movida hacia arriba
const currentBottom = parseInt(window.getComputedStyle(currentDiv).bottom);
// Aumenta la velocidad multiplicando la distancia por speedFactor
movedDistance = Math.max(0, currentBottom + (distance * speedFactor)); // Mueve el div hacia arriba
currentDiv.style.bottom = movedDistance + 'px'; // Mueve el div
startY = y; // Actualiza la posición inicial
}
};
const endDrag = () => {
isDragging = false; // Detener el arrastre
// Verifica si se alcanzó el 50% de la altura al soltar
if (movedDistance >= alertThreshold) {
alert("¡Has subido el div un 50%!");
}
currentDiv = null; // Resetea la referencia
};
// Eventos de Delegación para el área de agarre
document.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('drag-handle')) {
currentDiv = e.target.closest('.metagets'); // Asigna el div padre
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
// Eventos para touch
document.addEventListener('touchstart', (e) => {
if (e.target.classList.contains('drag-handle')) {
currentDiv = e.target.closest('.metagets'); // Asigna el div padre
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
});
</script>
</body>
</html>speedFactor con un valor de 1.5. Esto significa que el div se moverá un 50% más rápido en comparación con la distancia calculada inicialmente.distance por speedFactor para aumentar la velocidad de movimiento.speedFactor a un número mayor o menor. ¡Hazme saber si necesitas más ayuda!lo que quiero es que se mueva a la misma velocidad del mouse o touch
Para hacer que el div se mueva a la misma velocidad que el mouse o el toque, necesitas ajustar la manera en que calculas la nueva posición del div. En lugar de acumular la distancia del movimiento hacia arriba basada en el desplazamiento anterior, puedes simplemente establecer la nueva posición del div igual a la posición actual del mouse o del toque.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs Arrastrables Sincronizados</title>
<style>
body {
margin: 0;
height: 100vh; /* Altura completa de la ventana */
overflow: hidden; /* Evitar scroll */
position: relative; /* Para posicionar los divs hijos */
}
.metagets {
width: 300px; /* Ancho del div */
height: 200px; /* Alto del div */
background-color: blue; /* Color del div */
position: absolute; /* Necesario para permitir el movimiento */
display: flex;
flex-direction: column;
justify-content: flex-start; /* Asegura el contenido en la parte superior */
bottom: 0; /* Inicialmente en la parte inferior */
}
.content {
position: relative; /* Para asegurar que el contenido esté en su lugar */
width: 100%;
height: 100%;
z-index: 1; /* Para que el contenido esté encima */
}
.drag-handle {
background: gold; /* Color del área de agarre */
padding: 10px; /* Espaciado del área de agarre */
width: 100%; /* Ancho completo */
text-align: center; /* Centrar el texto */
cursor: move; /* Cursor de mover */
z-index: 2; /* Por encima del contenido */
}
</style>
</head>
<body>
<button id="addDiv">Agregar Div</button>
<script>
document.addEventListener("DOMContentLoaded", () => {
let isDragging = false;
let currentDiv = null; // Referencia al div actual arrastrable
let offsetY = 0; // El desplazamiento vertical desde el área de agarre
const startDrag = (e) => {
isDragging = true;
currentDiv = e.target.closest('.metagets'); // Asigna el div padre
offsetY = e.touches ? e.touches[0].clientY - currentDiv.getBoundingClientRect().top : e.clientY - currentDiv.getBoundingClientRect().top; // Calcular el desplazamiento
};
const drag = (e) => {
if (isDragging && currentDiv) {
// Calcula la nueva posición de acuerdo a la posición del mouse o toque
const y = e.touches ? e.touches[0].clientY : e.clientY;
const newBottom = window.innerHeight - (y - offsetY); // Calcula la nueva posición en la parte inferior
currentDiv.style.bottom = Math.max(0, newBottom) + 'px'; // Mueve el div
}
};
const endDrag = () => {
isDragging = false; // Detener el arrastre
currentDiv = null; // Resetea la referencia
};
// Eventos de Delegación para el área de agarre
document.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('drag-handle')) {
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
// Eventos para touch
document.addEventListener('touchstart', (e) => {
if (e.target.classList.contains('drag-handle')) {
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
// Agregar nuevo div
document.getElementById('addDiv').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'metagets';
newDiv.innerHTML = `
<div style="z-index:1; float:left; background:red; position:absolute; justify-content:center; justify-items:center; bottom:50px; width:100%; display:flex;">
<span class="drag-handle">Arrastra desde aquí</span>
</div>
<iframe class="content" src="https://www.example.com" frameborder="0"></iframe>
`; // Contenido dentro del div
document.body.appendChild(newDiv); // Agregar nuevo div al DOM
});
});
</script>
</body>
</html>drag, ahora la posición del div se calculan en función de la posición actual del mouse o del toque respecto al desplazamiento desde el área de agarre.getBoundingClientRect(): Esta función se utiliza para obtener la posición actual del div en la pantalla, permitiendo un ajuste más preciso al moverlo.bottom se establece de acuerdo a la posición del mouse/touch menos el desplazamiento calculado, asegurando que se siga la posición del cursor.ahora cuando le doy click desaparece
Parece que el problema de que el div desaparezca puede estar relacionado con cómo estamos calculando la posición en el evento de arrastre. Es posible que se esté posicionando fuera del área visible de la ventana.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs Arrastrables Sincronizados</title>
<style>
body {
margin: 0;
height: 100vh; /* Altura completa de la ventana */
overflow: hidden; /* Evitar scroll */
position: relative; /* Para posicionar los divs hijos */
}
.metagets {
width: 300px; /* Ancho del div */
height: 200px; /* Alto del div */
background-color: blue; /* Color del div */
position: absolute; /* Necesario para permitir el movimiento */
display: flex;
flex-direction: column;
justify-content: flex-start; /* Asegura el contenido en la parte superior */
bottom: 0; /* Inicialmente en la parte inferior */
}
.content {
position: relative; /* Para asegurar que el contenido esté en su lugar */
width: 100%;
height: 100%;
z-index: 1; /* Para que el contenido esté encima */
}
.drag-handle {
background: gold; /* Color del área de agarre */
padding: 10px; /* Espaciado del área de agarre */
width: 100%; /* Ancho completo */
text-align: center; /* Centrar el texto */
cursor: move; /* Cursor de mover */
z-index: 2; /* Por encima del contenido */
}
</style>
</head>
<body>
<button id="addDiv">Agregar Div</button>
<script>
document.addEventListener("DOMContentLoaded", () => {
let isDragging = false;
let currentDiv = null; // Referencia al div actual arrastrable
let offsetY = 0; // El desplazamiento vertical desde el área de agarre
const startDrag = (e) => {
isDragging = true;
currentDiv = e.target.closest('.metagets'); // Asigna el div padre
offsetY = e.touches ? e.touches[0].clientY - currentDiv.getBoundingClientRect().top : e.clientY - currentDiv.getBoundingClientRect().top; // Calcular el desplazamiento
};
const drag = (e) => {
if (isDragging && currentDiv) {
const y = e.touches ? e.touches[0].clientY : e.clientY;
// Calcula la nueva posición en la parte inferior
const newBottom = window.innerHeight - (y - offsetY);
// Asegúrate que el div no se mueva fuera de la ventana
if (newBottom >= 0 && newBottom <= window.innerHeight - currentDiv.offsetHeight) {
currentDiv.style.bottom = newBottom + 'px'; // Mueve el div solo si está dentro de los límites
}
}
};
const endDrag = () => {
isDragging = false; // Detener el arrastre
currentDiv = null; // Resetea la referencia
};
// Eventos de Delegación para el área de agarre
document.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('drag-handle')) {
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
// Eventos para touch
document.addEventListener('touchstart', (e) => {
if (e.target.classList.contains('drag-handle')) {
startDrag(e); // Iniciar arrastre
}
});
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
// Agregar nuevo div
document.getElementById('addDiv').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'metagets';
newDiv.innerHTML = `
<div style="z-index:1; float:left; background:red; position:absolute; justify-content:center; justify-items:center; bottom:50px; width:100%; display:flex;">
<span class="drag-handle">Arrastra desde aquí</span>
</div>
<iframe class="content" src="https://www.example.com" frameborder="0"></iframe>
`; // Contenido dentro del div
document.body.appendChild(newDiv); // Agregar nuevo div al DOM
});
});
</script>
</body>
</html>drag, se ha añadido una condición para asegurarnos de que el nuevo valor de bottom se mantenga dentro del límite de la ventana y no se desplace fuera de ella. Esto evita que el div "desaparezca" al arrastrarlo.newBottom esté entre 0 y la altura de la ventana menos la altura del div (esto asegura que siempre esté visible). 
