Resize div by Dragging Border in JavaScript

Resize div by Dragging Border in JavaScript
Code Snippet:SplitviewJs Demo
Author: Luis Reyes
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 659
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X