resize dom

by owen_pengtao

HTML

<div id="box">
  <div>Resize me !</div>
  <div id="handle">
  </div>
</div>

CSS

#box {
  position: relative;
  width: 130px;
  height: 130px;
  background-color: #2196F3;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

#handle {
  background-color: #727272;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  position: absolute;
  right: 0;
  bottom: 0;
}

JavaScript

var resizeHandle = document.getElementById('handle');
var box = document.getElementById('box');
resizeHandle.addEventListener('mousedown', initialiseResize, false);

function initialiseResize(e) {
  window.addEventListener('mousemove', startResizing, false);
  window.addEventListener('mouseup', stopResizing, false);
}

function startResizing(e) {
  box.style.width = (e.clientX - box.offsetLeft) + 'px';
}

function stopResizing(e) {
  window.removeEventListener('mousemove', startResizing, false);
  window.removeEventListener('mouseup', stopResizing, false);
}