Element resizable

by Michael Barros

HTML

<div id="element">Element resizable</div>
<div>Block1</div>
<div>Block2</div>

SASS

div {
    position: relative;
    float: left;
    overflow: hidden;
    background: blue;
    height: 200px;
    width: 200px;
}

#element {
    position: relative;
    overflow: hidden;
    background: green;
    height: 200px;
    width: 200px;
}

.debugger-repl-resizer {
    
}

JavaScript

let element = document.querySelectorAll('#element')[0];
let resizer = document.createElement('div');

resizer.className = 'resizer';
resizer.style.width = '100%';
resizer.style.height = '10px';
resizer.style.background = 'red';
resizer.style.position = 'absolute';
resizer.style.right = 0;
resizer.style.bottom = 0;
resizer.style.cursor = 'ns-resize';
element.appendChild(resizer);
resizer.addEventListener('mousedown', initResize, false);

function initResize(e) {
    window.addEventListener('mousemove', Resize, false);
    window.addEventListener('mouseup', stopResize, false);
}

function Resize(e) {
    element.style.width = (e.clientX - element.offsetLeft) + 'px';
    element.style.height = (e.clientY - element.offsetTop) + 'px';
}

function stopResize(e) {
    window.removeEventListener('mousemove', Resize, false);
    window.removeEventListener('mouseup', stopResize, false);
}