Para modificar la anchura de cualquier elemento en con cursor del ratón, o por medio de un dedo y una pantalla touch, disponemos de una opción en CSS y otra más flexible con un simple script en JavaScript.
Opción 1 CSS
Debes usar overflow con una opción de desplazamiento, como puede ser auto o scroll, acompañado de resize.
demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
En el caso que busquemos un desplazamiento horizontal.
<div class="elemento">
Lorem ipsum...
</div>
.elemento {
overflow: auto;
resize: horizontal;
}
Ventajas
- Rápido de implementar.
- No requiere JavaScript.
Contras
- No puedes personalizar el icono.
- Siempre redimensiona de la esquina inferior derecha.
Opción 2 JavaScript
Por un lado necesitaremos el siguiente HTML. Es importante disponer de un elemento que en su interior contenga un hijo con la clase resizable__control, será el diseño del controlador.
demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
↔️
<div class="elemento">
Lorem ipsum...
<div class="resizable__control">:left-right-arrow:</div>
</div>
Unos estilos para situar el controlador a la derecha.
.elemento {
position: relative;
padding-right: 3rem;
background: orange;
}
.resizable__control {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
Ahora incluimos el siguiente JavaScript dentro de una etiqueta <script>.
function makeResizable(selector) {
document.querySelectorAll(selector).forEach(function (element) {
const resizer = element.querySelector(".resizable__control");
const minimum_size = 20;
let original_width = 0;
let original_x = 0;
let original_mouse_x = 0;
resizer.addEventListener("mousedown", function (e) {
e.preventDefault();
original_width = parseFloat(
getComputedStyle(element, null)
.getPropertyValue("width")
.replace("px", "")
);
original_height = parseFloat(
getComputedStyle(element, null)
.getPropertyValue("height")
.replace("px", "")
);
original_x = element.getBoundingClientRect().left;
original_mouse_x = e.pageX;
window.addEventListener("mousemove", resize);
window.addEventListener("mouseup", stopResize);
});
function resize(e) {
if (resizer.classList.contains("resizable__control")) {
const width = original_width + (e.pageX - original_mouse_x);
if (width > minimum_size) {
element.style.width = width + "px";
}
}
}
function stopResize() {
window.removeEventListener("mousemove", resize);
}
});
}
// Ejecutar
makeResizable(".elemento");
Ventajas
- Puedes elegir que elemento, aspecto y que posición, tendrá el control de arrastre.
- Funciona en cualquier navegador, incluyendo algunos desfasados.
Contras
- Es más complejo.
- Necesitas incluir un fragmento de JavaScript para que funcione.
Ahora ya depende de tus necesidades.
{{ comments.length }} comentarios