Create Resizable DOM Elements With Vanilla JavaScript – js-resizable

Preview:

Description:

A basic vanilla JavaScript resizable library which enables you to resize any DOM elements by dragging the resize handler.

How to use it:

Just import the resizable.js script into the document and you’re ready to go.

<script src="resizable.js"></script>

Add the ‘js-resizable’ class to any element which should be resizable. You can also specify the boundary element using ‘js-resizable-limiter’ class.

<div class="outer js-resizable-limiter">
  <div class="inner inner--1 resizable js-resizable-limiter">
    Content A
    
    <div class="inner inner--2 js-resizable">
      Sub-content A
    </div>
  </div>
  <div class="inner inner--3 js-resizable">
    Content B
  </div>
</div>