Skip to content

Instantly share code, notes, and snippets.

@ZeroX-DG
Last active May 10, 2018 08:11
Show Gist options
  • Save ZeroX-DG/652f3a4f09b667d635ccf86490c024a2 to your computer and use it in GitHub Desktop.
Save ZeroX-DG/652f3a4f09b667d635ccf86490c024a2 to your computer and use it in GitHub Desktop.
function makeResizableDiv(div) {
const element = document.querySelector(div);
const resizers = document.querySelectorAll(div + ' .resizer')
for (let i = 0;i < resizers.length; i++) {
const currentResizer = resizers[i];
currentResizer.addEventListener('mousedown', function(e) {
e.preventDefault()
window.addEventListener('mousemove', resize)
window.addEventListener('mouseup', stopResize)
})
function resize(e) {
if (currentResizer.classList.contains('bottom-right')) {
element.style.width = e.pageX - element.getBoundingClientRect().left + 'px'
}
}
function stopResize() {
window.removeEventListener('mousemove', resize)
}
}
}
makeResizableDiv('.resizable')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment