JavaScript cambiar anchura de un elemento HTML con el ratón

2 minutos

Redimensionar

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.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

Donación con recompensa

  • 1 café: Respondo a tu duda en los comentarios.
  • 2 cafés: Respondo en menos de 24h a tu comentario.
  • 3 cafés: Todo lo anterior y además te doy las gracias en mis redes.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...