Resizable div with js

by MissoulaLorenzo

HTML

<div class="resizable">
    Resizeable
    <div class='resizer'>R</div>
</div>

CSS

.resizable { height: 200px; width: 300px;background: cyan; position: relative; }
.resizer { width: 10px; height: 10px; background: blue; position:absolute; right: 0; bottom: 0; cursor: se-resize; }

JavaScript

var resizable = document.querySelector('.resizable'),
    resizer = document.querySelector( '.resizer' ),
    startX, startY, startWidth, startHeight;
    
resizer.addEventListener( 'mousedown', initDrag, false );

function initDrag( e ) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt( document.defaultView.getComputedStyle( resizable ).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle( resizable ).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
   resizable.style.width = (startWidth + e.clientX - startX) + 'px';
   resizable.style.height = (startHeight + e.clientY - startY) + 'px';
}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);    
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}