JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/interact.min.js"></script>
<div class="resize-container"></div>
<div id="c"></div>
<div id="e"></div>

CSS

body {
	overflow: hidden;
}

div.resize-container {
  width: 100vw;
  height: 100vh;
}
#c,#e{
  width:10px;
  height:10px;
  background:red;
  position:absolute;
}

.resize-drag {
  background-color: lightblue;

  width: 100px;
  height: 100px;
  
  box-sizing: border-box;

  position: absolute;
  border: solid 1px black;
}

img {
  width: 100%;
  height: auto;

  object-fit: contain;
}

#images0 {
  position: absolute;
  left: 200px;
  top: 200px;
}

JavaScript

var imgArray = [
  "https://www.shareicon.net/data/128x128/2017/04/11/883742_search_512x512.png"
];

var l = imgArray.length;

$(function () {
  for (var i = 0; i < l; i++) {
    $resizedrag = $(
      '<div id="images' + i + '"><img src="' + imgArray[i] + '"></div>'
    ); //creat new <div> with dynamic id
    $resizedrag.addClass("resize-drag"); //add resize-drag class to the above created <div>

    $(".resize-container").append($resizedrag); //append created <div> with setting its detailes to parent <div>
  }
});

function dragMoveListener(event) {
  var target = event.target,
    // keep the dragged position in the data-x/data-y attributes
    x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx,
    y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;

  // translate the element
  target.style.webkitTransform = target.style.transform =
    "translate(" + x + "px, " + y + "px)";

  // update the posiion attributes
  target.setAttribute("data-x", x);
  target.setAttribute("data-y", y);
}

interact(".resize-drag")
  .resizable({
    // resize from all edges and corners
    edges: { left: true, right: true, bottom: true, top: true },

    //keep aspectratio
    preserveAspectRatio: true,

    // keep the edges inside the parent
    restrictEdges: {
      outer: "parent",
      endOnly: true
    },

    // minimum size
    restrictSize: {
      min: { width: 100, height: 50 }
    },

    inertia: false
  })

  .on("resizemove", function (event) {
    var target = event.target,
      x = parseFloat(target.getAttribute("data-x")) || 0,
      y = parseFloat(target.getAttribute("data-y")) || 0;

    // update the element's style
    target.style.width = event.rect.width + "px";
    target.style.height = event.rect.height + "px";

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
      "translate(" + x + "px," + y +...