Resizable Split Layout In Pure JavaScript – Resizable.js

Preview:

Description:

Resizable.js is a pure JavaScript library to create a resizable split layout where you can adjust the size of each ‘Window’ via drag and drop or touch events.

How to use it:

1. To get started, include the Resizable.js library on the webpage.

<link rel="stylesheet" href="resizable-style.css" />
<script src="resizable.js"></script>

2. Split your layout into several ‘Windows’ as follows:

<div id="main">
  <div class="resizable-left" id="win1">
    <div class="resizable-top" id="win3">
      <div class="resizable-left" id="win5"></div>
      <div class="resizable-right" id="win6"></div>
    </div>
    <div class="resizable-bottom" id="win4"></div>
  </div>
  <div class="resizable-right" id="win2">
    <div class="resizable-top" win="win7">
      <div class="resizable-left" id="win9"></div>
      <div class="resizable-right" id="win10">
        <div class="resizable-top" id="win11">
          <div class="resizable-left" id="win13"></div>
          <div class="resizable-right" id="win14"></div>
        </div>
        <div class="resizable-bottom" id="win12"></div>
      </div>
    </div>
    <div class="resizable-bottom" id="win8"></div>
  </div>
</div>

3. Initialize the library on the parent and done.

Resizable.initialise("main");

4. Make the split layout fully responsive.

window.addEventListener("resize", () => {
  Resizable.activeContentWindows[0].changeSize(window.innerWidth, window.innerHeight);
  Resizable.activeContentWindows[0].childrenResize();
});

5. Set the size (in percent) for each Window as follows:

var sizes = {
    "win1" : 0.5,
    "win3" : 0.75,
    "win4" : 0.5,
    "win6" : 0.4,
    "win11" : 0.8,
    "win9" : 0.5,
    "win13" : 0.4 
};

Resizable.initialise("main", size);

Changelog:

08/31/2021

• Fix content being selected when resizing

08/06/2021

• Fix loss of event listeners upon initialisation

05/09/2021

• Add function to resize the parent container

01/11/2021

• Add events for resizing starting and ending

10/20/2020

• Update to allow resizerThickness to be specified in initialisation call