Resize div by Dragging Border in JavaScript

This JavaScript code snippet helps you to resize div by dragging border. It initializes a split view layout with resizable containers. The method `splitview.addEventListener` listens for resizing events like horizontal and vertical resizing, start, and stop, triggering the function `call(e)` to log the event details. This functionality helps create interactive interfaces with resizable divs by drag-and-drop actions.

How to Create Resize Div By Dragging Border In Javascript

1. First of all, load the Splitview CSS by adding the following CDN links into the head tag of your HTML document.

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/luisreyes/SplitviewJs/master/lib/splitview.css"/>
<link rel='stylesheet' href='https://raw.githubusercontent.com/luisreyes/splitview.js/master/lib/min/splitview.min.css'>

2. Include the necessary HTML structure with div elements representing the containers you want to resize.

<section id="work-space">
    
    <section id="container0">
      <span>
        <h2>Your Content Here</h2>
        <p>Consectetur adipiscing elit. Quisque nec tempor sem, quis pulvinar quam. Aenean iaculis tempor sem. Nunc sed tincidunt augue, et ultricies eros. In hac habitasse platea dictumst. Vivamus condimentum vehicula porta. Nulla sapien velit, scelerisque non suscipit eu, malesuada eget nisl. Pellentesque gravida a nunc in volutpat. Donec pulvinar nulla massa, eu placerat lacus facilisis eget. Etiam vel cursus erat, sed ultricies felis. Etiam turpis nisi, lacinia eu velit posuere, ullamcorper tincidunt urna. Maecenas blandit nisi felis, quis condimentum dui viverra a.</p>

        <p>Donec vehicula risus id vulputate sodales. Donec convallis varius elementum. Cras iaculis orci id nulla ornare posuere. Sed ullamcorper eget lacus in dictum. Vivamus eget cursus lorem. Curabitur pulvinar pellentesque tellus, nec posuere tortor sollicitudin eget. Ut consectetur placerat lorem quis ultricies. Donec varius sapien quis turpis vestibulum mattis id et leo. Cras eleifend ante at urna lacinia, non dapibus dui consectetur. Suspendisse id iaculis risus, at eleifend eros. Suspendisse nec mollis ipsum. Maecenas et nunc vitae dui molestie eleifend et vel augue. Nunc ac nibh sed ligula cursus elementum a vitae sapien. Suspendisse quis felis et arcu fringilla pellentesque id id tellus. Nullam ut ullamcorper arcu. Pellentesque ac tempus turpis.</p>
      </span>
    </section>
    
    <section id="container1">
      <span>
        <h2>Your Content Here</h2>
        <p>Consectetur adipiscing elit. Quisque nec tempor sem, quis pulvinar quam. Aenean iaculis tempor sem. Nunc sed tincidunt augue, et ultricies eros. In hac habitasse platea dictumst. Vivamus condimentum vehicula porta. Nulla sapien velit, scelerisque non suscipit eu, malesuada eget nisl. Pellentesque gravida a nunc in volutpat. Donec pulvinar nulla massa, eu placerat lacus facilisis eget. Etiam vel cursus erat, sed ultricies felis. Etiam turpis nisi, lacinia eu velit posuere, ullamcorper tincidunt urna. Maecenas blandit nisi felis, quis condimentum dui viverra a.</p>

        <p>Donec vehicula risus id vulputate sodales. Donec convallis varius elementum. Cras iaculis orci id nulla ornare posuere. Sed ullamcorper eget lacus in dictum. Vivamus eget cursus lorem. Curabitur pulvinar pellentesque tellus, nec posuere tortor sollicitudin eget. Ut consectetur placerat lorem quis ultricies. Donec varius sapien quis turpis vestibulum mattis id et leo. Cras eleifend ante at urna lacinia, non dapibus dui consectetur. Suspendisse id iaculis risus, at eleifend eros. Suspendisse nec mollis ipsum. Maecenas et nunc vitae dui molestie eleifend et vel augue. Nunc ac nibh sed ligula cursus elementum a vitae sapien. Suspendisse quis felis et arcu fringilla pellentesque id id tellus. Nullam ut ullamcorper arcu. Pellentesque ac tempus turpis.</p>
      </span>
    </section>
    
    <section id="container2">
      <span>
        <h2>Your Content Here</h2>
        <p>Consectetur adipiscing elit. Quisque nec tempor sem, quis pulvinar quam. Aenean iaculis tempor sem. Nunc sed tincidunt augue, et ultricies eros. In hac habitasse platea dictumst. Vivamus condimentum vehicula porta. Nulla sapien velit, scelerisque non suscipit eu, malesuada eget nisl. Pellentesque gravida a nunc in volutpat. Donec pulvinar nulla massa, eu placerat lacus facilisis eget. Etiam vel cursus erat, sed ultricies felis. Etiam turpis nisi, lacinia eu velit posuere, ullamcorper tincidunt urna. Maecenas blandit nisi felis, quis condimentum dui viverra a.</p>

        <p>Donec vehicula risus id vulputate sodales. Donec convallis varius elementum. Cras iaculis orci id nulla ornare posuere. Sed ullamcorper eget lacus in dictum. Vivamus eget cursus lorem. Curabitur pulvinar pellentesque tellus, nec posuere tortor sollicitudin eget. Ut consectetur placerat lorem quis ultricies. Donec varius sapien quis turpis vestibulum mattis id et leo. Cras eleifend ante at urna lacinia, non dapibus dui consectetur. Suspendisse id iaculis risus, at eleifend eros. Suspendisse nec mollis ipsum. Maecenas et nunc vitae dui molestie eleifend et vel augue. Nunc ac nibh sed ligula cursus elementum a vitae sapien. Suspendisse quis felis et arcu fringilla pellentesque id id tellus. Nullam ut ullamcorper arcu. Pellentesque ac tempus turpis.</p>
      </span>
    </section>
    
    <section id="container3">
      <span>
        <h2>Your Content Here</h2>
        <p>Consectetur adipiscing elit. Quisque nec tempor sem, quis pulvinar quam. Aenean iaculis tempor sem. Nunc sed tincidunt augue, et ultricies eros. In hac habitasse platea dictumst. Vivamus condimentum vehicula porta. Nulla sapien velit, scelerisque non suscipit eu, malesuada eget nisl. Pellentesque gravida a nunc in volutpat. Donec pulvinar nulla massa, eu placerat lacus facilisis eget. Etiam vel cursus erat, sed ultricies felis. Etiam turpis nisi, lacinia eu velit posuere, ullamcorper tincidunt urna. Maecenas blandit nisi felis, quis condimentum dui viverra a.</p>

        <p>Donec vehicula risus id vulputate sodales. Donec convallis varius elementum. Cras iaculis orci id nulla ornare posuere. Sed ullamcorper eget lacus in dictum. Vivamus eget cursus lorem. Curabitur pulvinar pellentesque tellus, nec posuere tortor sollicitudin eget. Ut consectetur placerat lorem quis ultricies. Donec varius sapien quis turpis vestibulum mattis id et leo. Cras eleifend ante at urna lacinia, non dapibus dui consectetur. Suspendisse id iaculis risus, at eleifend eros. Suspendisse nec mollis ipsum. Maecenas et nunc vitae dui molestie eleifend et vel augue. Nunc ac nibh sed ligula cursus elementum a vitae sapien. Suspendisse quis felis et arcu fringilla pellentesque id id tellus. Nullam ut ullamcorper arcu. Pellentesque ac tempus turpis.</p>
      </span>
    </section>
  
  </section>

3. Add the following CSS code to your stylesheet or within a <style> tag in the HTML to define the appearance of the divs and split view layout.

body, html{ color: #333; font-family: sans-serif; }


/* Splitview Specific */
.sv-split-space { background-color: #333; height:100%; }

.sv-tl { background-color:#389090; }
.sv-tr { background-color:#f47e7d; }
.sv-bl { background-color:#b5d045; }
.sv-br { background-color:#fb8335; }

.sv-v, .sv-vt, .sv-vb{ border-left: 1px solid #333; }
.sv-h, .sv-hl, .sv-hr{ border-top: 1px solid #333; }

4. Now, load the SplitviewJS by adding the following CDN link just before closing the body tag:

<script src='https://cdn.rawgit.com/luisreyes/SplitviewJs/master/lib/splitview.js'></script>

5. Finally, include the JavaScript code within your script tags or external JavaScript file. This code initializes the split view and sets up event listeners for resizing.

splitview.init({
      main:'work-space',
      layout: '30,50,70',
      containers:{
        tl:'container0',
        tr:'container1',
        bl:'container2',
        br:'container3'
      }
    });

    // This is an example of the events
    
    //splitview.addEventListener('resize', call);
    splitview.addEventListener('resizehorizontal', call);
    splitview.addEventListener('resizevertical', call);
    splitview.addEventListener('resizestart', call);
    splitview.addEventListener('resizestop', call);
    
    function call(e){
      console.log(e);
    }

That’s all! hopefully, you have successfully integrated this draggable resizing div elements functionality into your project. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.