Para hacer un modal arrastrable (draggable) en Bootstrap 5, puedes usar JavaScript puro y la API de eventos de arrastre (mousedown, mousemove, mouseup). Bootstrap 5 no proporciona esta funcionalidad de forma nativa, pero puedes implementarla fácilmente.
Pasos para hacer un modal arrastrable:
- Capturar el evento
mousedownen el encabezado del modal. - Seguir el movimiento del mouse con
mousemovey actualizar la posición. - Liberar el arrastre con
mouseup.
Código Completo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Arrastrable - Bootstrap 5</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Evita la selección de texto al arrastrar */
.modal-header {
cursor: grab;
user-select: none;
}
</style>
</head>
<body>
<!-- Botón para abrir el modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#miModal">
Abrir Modal
</button>
<!-- Modal -->
<div class="modal fade" id="miModal" tabindex="-1" aria-labelledby="modalTitulo" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title" id="modalTitulo">Modal Arrastrable</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
</div>
<div class="modal-body">
Arrastra el encabezado del modal para moverlo.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const modal = document.querySelector(".modal-dialog"); // Elemento a mover
const header = document.querySelector(".modal-header"); // Zona de agarre
let isDragging = false;
let startX, startY, initialX, initialY;
header.addEventListener("mousedown", (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
const rect = modal.getBoundingClientRect();
initialX = rect.left;
initialY = rect.top;
modal.style.position = "absolute"; // Hace que el modal sea movible
});
document.addEventListener("mousemove", (e) => {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
modal.style.left = `${initialX + dx}px`;
modal.style.top = `${initialY + dy}px`;
});
document.addEventListener("mouseup", () => {
isDragging = false;
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Explicación:
- El usuario arrastra el encabezado (
.modal-header) y activamousedown. - Se mueve el modal con
mousemove, ajustando su posiciónleftytop. - Se suelta el mouse (
mouseup) y detiene el movimiento.
Características:
✅ Compatible con Bootstrap 5
✅ No afecta la funcionalidad del modal
✅ Evita selección de texto mientras arrastras
✅ Se puede cerrar con los botones de Bootstrap
