Javascript 如何使可调整大小的div，从侧面调整大小？

我从codepen中得到了这段代码，它生成了一个可调整大小的div，可从角点调整大小：

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

body,
html {
  background: black;
}
.resizable {
  background: white;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
}

.resizable .resizers{
  width: 100%;
  height: 100%;
  border: 3px solid #4286f4;
  box-sizing: border-box;
}

.resizable .resizers .resizer{
  width: 10px;
  height: 10px;
  border-radius: 50%; /*magic to turn square into circle*/
  background: white;
  border: 3px solid #4286f4;
  position: absolute;
}

.resizable .resizers .resizer.top-left {
  left: -5px;
  top: -5px;
  cursor: nwse-resize; /*resizer cursor*/
}
.resizable .resizers .resizer.top-right {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-left {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-right {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}

function makeResizableDiv(div) {
  const element = document.querySelector(div);
  const resizers = document.querySelectorAll(div + ' .resizer')
  const minimum_size = 20;
  let original_width = 0;
  let original_height = 0;
  let original_x = 0;
  let original_y = 0;
  let original_mouse_x = 0;
  let original_mouse_y = 0;
  for (let i = 0;i < resizers.length; i++) {
    const currentResizer = resizers[i];
    currentResizer.addEventListener('mousedown', function(e) {
      e.preventDefault()
      original_width = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));
      original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));
      original_x = element.getBoundingClientRect().left;
      original_y = element.getBoundingClientRect().top;
      original_mouse_x = e.pageX;
      original_mouse_y = e.pageY;
      window.addEventListener('mousemove', resize)
      window.addEventListener('mouseup', stopResize)
    })

    function resize(e) {
      if (currentResizer.classList.contains('bottom-right')) {
        const width = original_width + (e.pageX - original_mouse_x);
        const height = original_height + (e.pageY - original_mouse_y)
        if (width > minimum_size) {
          element.style.width = width + 'px'
        }
        if (height > minimum_size) {
          element.style.height = height + 'px'
        }
      }
      else if (currentResizer.classList.contains('bottom-left')) {
        const height = original_height + (e.pageY - original_mouse_y)
        const width = original_width - (e.pageX - original_mouse_x)
        if (height > minimum_size) {
          element.style.height = height + 'px'
        }
        if (width > minimum_size) {
          element.style.width = width + 'px'
          element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
        }
      }
      else if (currentResizer.classList.contains('top-right')) {
        const width = original_width + (e.pageX - original_mouse_x)
        const height = original_height - (e.pageY - original_mouse_y)
        if (width > minimum_size) {
          element.style.width = width + 'px'
        }
        if (height > minimum_size) {
          element.style.height = height + 'px'
          element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
        }
      }
      else {
        const width = original_width - (e.pageX - original_mouse_x)
        const height = original_height - (e.pageY - original_mouse_y)
        if (width > minimum_size) {
          element.style.width = width + 'px'
          element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
        }
        if (height > minimum_size) {
          element.style.height = height + 'px'
          element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
        }
      }
    }

    function stopResize() {
      window.removeEventListener('mousemove', resize)
    }
  }
}

makeResizableDiv('.resizable')

身体，
html{
背景：黑色；
}
.可调整大小{
背景：白色；
宽度：100px；
高度：100px；
位置：绝对位置；
顶部：100px；
左：100px；
}
.可调整大小。调整大小器{
宽度：100%；
身高：100%；
边框：3px实心#4286f4；
框大小：边框框；
}
.可调整大小。调整大小。调整大小{
宽度：10px；
高度：10px；
边界半径：50%；/*将正方形变为圆形的魔法*/
背景：白色；
边框：3px实心#4286f4；
位置：绝对位置；
}
.resizer.resizers.resizer.top-left{
左：-5px；
顶部：-5px；
光标：nwse resize；/*大小调整器光标*/
}
.resizer.resizers.resizer.top-right{
右：-5px；
顶部：-5px；
光标：nesw调整大小；
}
.resizer.resizers.resizer.bottom-left{
左：-5px；
底部：-5px；
光标：nesw调整大小；
}
.resizer.resizers.resizer.bottom-right{
右：-5px；
底部：-5px；
光标：nwse调整大小；
}
函数makeResizebleDiv（div）{
const元素=document.querySelector（div）；
const resizers=document.querySelectorAll（div+'.resizer'）
const最小_大小=20；
让原始宽度=0；
让原始高度=0；
设原始_x=0；
设原始_y=0；
让原始鼠标_x=0；
让原始鼠标_y=0；
for（设i=0；i最小尺寸）{
element.style.width=宽度+px
}
如果（高度>最小尺寸）{
element.style.height=高度+px
}
}
else if（currentResizer.classList.contains（'bottom-left'））{
常量高度=原始高度+（e.pageY-原始鼠标）
常量宽度=原始宽度-（e.pageX-原始鼠标）
如果（高度>最小尺寸）{
element.style.height=高度+px
}
如果（宽度>最小尺寸）{
element.style.width=宽度+px
element.style.left=original_x+（e.pageX-original_mouse_x）+“px”
}
}
else if（currentResizer.classList.contains（'top-right'））{
常量宽度=原始宽度+（e.pageX-原始鼠标）
常量高度=原始高度-（e.pageY-原始鼠标）
如果（宽度>最小尺寸）{
element.style.width=宽度+px
}
如果（高度>最小尺寸）{
element.style.height=高度+px
element.style.top=original_y+（e.pageY-original_mouse_y）+“px”
}
}
否则{
常量宽度=原始宽度-（e.pageX-原始鼠标）
常量高度=原始高度-（e.pageY-原始鼠标）
如果（宽度>最小尺寸）{
element.style.width=宽度+px
element.style.left=original_x+（e.pageX-original_mouse_x）+“px”
}
如果（高度>最小尺寸）{
element.style.height=高度+px
element.style.top=original_y+（e.pageY-original_mouse_y）+“px”
}
}
}
函数stopResize（）{
window.removeEventListener（'mousemove'，resize）
}
}
}
makeResizebleDiv（“.resizeble”）

如何从侧面调整大小？ 它应该在右、左、下、右和上侧的中间有一个圆，并从那里调整大小。 以下是原始笔的链接：

---

可能需要四个新的ifs和四个新的css类，但我不确定。

我调整了位置和类标题，将手柄放在侧面，然后从每个类中删除脚本，允许调整两个方向

函数makeResizebleDiv（div）{
const元素=document.querySelector（div）；
const resizers=document.querySelectorAll（div+'.resizer'）
const最小_大小=20；
让原始宽度=0；
让原始高度=0；
设原始_x=0；
设原始_y=0；
让原始鼠标_x=0；
让原始鼠标_y=0；
for（设i=0；i最小尺寸）{
element.style.width=宽度+px
}
}
else if（currentResizer.classList.contains（'left'））{
常量宽度=原始宽度-（e.pageX-原始鼠标）
如果（宽度>最小尺寸）{
元素、样式、宽度=