JSFiddle - React, Tailwind, and code Playground

by niks_on

HTML

<div class="dynamic-box">Зажми ЛКМ<br>Подвигай мышь</div>

CSS

body {
  font-family: sans-serif;
  background-color: whitesmoke;
}

.dynamic-box {
  width: 200px;
  height: 200px;
  min-width: 200px;
  min-height: 200px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ddd;
  border-radius: 3px;
  cursor: grab;
  box-shadow: 0 0 3px 2px #ccc;
}

JavaScript

let box = false;

document.addEventListener("mousedown", event => box = event.target.closest(".dynamic-box"));
document.addEventListener("mouseup", event => box = false);

document.addEventListener("mousemove", event => {
  if (!box) return;
  
  box.style.width = parseInt(getComputedStyle(box).width) + event.movementX + "px";
  box.style.height = parseInt(getComputedStyle(box).height) + event.movementY + "px";
});