Inertia Test - interact.js

HTML

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<div id="container">
  <div id="box"></div>
</div>

CSS

#container {
  position: relative;
  width: 500px;
  height: 300px;
  margin-left: 30px;
  margin-top: 30px;
  outline: 10px solid green;
}

#box {
  position: absolute;
  top: 30px;
  left: 80px;
  width: 100px;
  height: 100px;
  outline: 10px solid blue;
}

JavaScript

function moveHandler(evt) {
	const target = evt.target;
  
  let x = parseFloat(target.dataset.x) || 0;
  let y = parseFloat(target.dataset.y) || 0;
  
  x += evt.deltaRect.left;
  y += evt.deltaRect.top;
  
  Object.assign(target.style, {
  	width: `${evt.rect.width}px`,
    height: `${evt.rect.height}px`,
    transform: `translate(${x}px, ${y}px)`,
  });
  
  target.dataset.x = x;
  target.dataset.y = y;
}

interact("#box")
.resizable({
	edges: {left: true, top: true, right: true, bottom: true},
  inertia: true,
  listeners: {
  	move: moveHandler,
  },
  modifiers: [
  	interact.modifiers.restrictSize({
    	min: {width: 50, height: 50},
    }),
    interact.modifiers.aspectRatio({
    	ratio: "preserve",
      modifiers: [
  			interact.modifiers.restrictEdges({
  		  	outer: "parent",
		    }),
      ],
    })
  ],
});