JSFiddle - React, Tailwind, and code Playground

by yojona

HTML

<div id="box" 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 class='resizer right'></div>
    <div class='resizer top'></div>
    <div class='resizer bottom'></div>
    <div class='resizer left'></div>
  </div>
</div>

CSS

body,
html {
  background: #18181a;
}
.resizable {
  background: rgba(41, 243, 208, 0.2);
  width: 100px;
  height: 100px;
  position: absolute;
  top: 100px;
  left: 100px;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 4px #00f3d3;
}

.resizable .resizers{
  width: 100%;
  height: 100%;
}

.resizable .resizers .resizer{
  width: 8px;
  height: 8px;
  border-radius: 2px; /*magic to turn square into circle*/
  background: #00f3d3;
  position: absolute;
}

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

.resizable .resizers .resizer.right {
  width: 6px;
  height: 6px;
  right: -13px;
  bottom: calc(50% - 4px);
  cursor: ew-resize;
}

.resizable .resizers .resizer.left {
  width: 6px;
  height: 6px;
  left: -13px;
  bottom: calc(50% - 4px);
  cursor: ew-resize;
}

.resizable .resizers .resizer.top {
  width: 6px;
  height: 6px;
  left: calc(50% - 4px);
  top: -13px;
  cursor: ns-resize;
}

.resizable .resizers .resizer.bottom {
  width: 6px;
  height: 6px;
  left: calc(50% - 4px);
  bottom: -13px;
  cursor: ns-resize;
}

JavaScript

var mousePosition;
var offset
var div
var isDown = false
var isResizing = false
const zoom = 1

const gridX = 16

var container = document.body;

container.style.zoom = zoom


div = document.getElementById("box");

div.addEventListener('mousedown', function(e) {
    isDown = true;
    offset = {
        x: div.offsetLeft - e.clientX / zoom,
        y: div.offsetTop - e.clientY / zoom
    };
}, true);

document.addEventListener('mouseup', function() {
    isDown = false;
}, true);

document.addEventListener('mousemove', function(event) {
    event.preventDefault();
    if (isDown && !isResizing) {
        mousePosition = {
    
            x : event.clientX / zoom,
            y : event.clientY /zoom	
    
        };
        div.style.left = (mousePosition.x + offset.x) + 'px';
        div.style.top  = (mousePosition.y + offset.y) + 'px';
    }
}, true);



/*Make resizable div by Hung Nguyen*/
function makeResizableDiv(div) {
  const element = document.querySelector(div);
  const resizers = document.querySelectorAll(div + ' .resizer')
  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) {
    	isResizing = true
      if...