JSFiddle - React, Tailwind, and code Playground

by arawn45

HTML

<div class='resizable'>
  <div class='resizers'>
 
    <div class='resizer top-right'></div>
 
  </div>
</div>
<br>
<div class='resizable'>
  <div class='resizers'>
 
    <div class='resizer top-right'></div>
 
  </div>
</div>
<br>
<div class='resizable'>
  <div class='resizers'>
 
    <div class='resizer top-right'></div>
 
  </div>
</div>

CSS

<style type="text/css">
 
body,
html {
  background: black;
}
.resizable {
  background: white;
  width: 100px;
  height: 100px;
  position: relative;
  top: 100px;
  left: 100px;
}
 
.resizable .resizers{
  width: 100%;
  height: 100%;
  border: 3px solid #4286f4;
  box-sizing: border-box;
}
 
.resizable .resizers .resizer{
  width: 5px;
  height: 100%;
 
  position: absolute;
}
 
 
.resizable .resizers .resizer.top-right {
  right: -1px;
  top: -1px;
  cursor: ew-resize;
}
 
 
 
 </style>

JavaScript

const divResizer = document.querySelectorAll('.resizer')
 
        for (const divSelect of divResizer) {
            divSelect.addEventListener('mousedown', () => {
                let offset = { x: 0, y: 0 },
                    rezisecontent = divSelect.closest('.resizable')
 
                rezisecontent.addEventListener('mousedown', resizeMouseDown, false)
                rezisecontent.addEventListener('mouseup', resizeMouseUp, false)
 
                function resizeMouseUp(e) {
               			console.log(e.type);
                    window.removeEventListener('mousemove', divResize, true)
                }
 
                function resizeMouseDown(e) {
                		console.log(e.type);
                    offset.x = e.clientX - rezisecontent.offsetWidth
                    window.addEventListener('mousemove', divResize, true)
                }
 
                function divResize(e) {
                    let left = e.clientX - offset.x
                    let maxLeft = (window.clientWidth)
                    left = left > maxLeft ? maxLeft - 1 : left
                    rezisecontent.style.width = `${left}px`
                }
            })
        }