Как изменить размер блока мышью?

Всем приветы! Такая ситуация. У нас есть блок с фиксированной шириной и высотой. Вот он.

<div class="myblock">
</div>

У блока такой стиль

#myblock{width:200px;height:200px}

Как сделать так, чтобы при наведении мышки на границу блока появляись стрелки для изменения его размеров, и чтоб размер можно было поменять. По возможности еще неплохо бы чтобы этот блок можно было таскать по экрану.

Стрелки в общем случае как то так делаются

let block = document.querySelector(".myblock");
const dt = 3;
 
block.onmousemove = (event) => {
    let isVertical = event.offsetX < dt || event.offsetX > block.offsetWidth - dt;
    let isHorizontal = event.offsetY < dt || event.offsetY > block.offsetHeight - dt;
    let cursor = 'default';
 
    if ...
    // ew-resize, ns-resize, nesw-resize, nwse-resize
    
    block.style.cursor = cursor;
};

Нужно будет расписывать все случаи по 4-м сторонам и 4-м углам Само изменние тоже самое, только навешиваетесь уже на весь window click / move чтобы перерасчёт координат новых верен был при движени

brian778, «Нужно будет расписывать все случаи по 4-м сторонам и 4-м углам» попроще то никак? вообще я удивляюсь, почему в html5 это не предусмотрено

skabunker, В этом смысле. Можно и проще

.myblock {
    width: 200px;
    height: 200px;
    background-color: red;
    resize:both;
    overflow: auto;
}