interactjs resize

by Maksim Kachurin

HTML

<script src="https://cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>
<div class="resize-container">
  <div class="resize-drag">
     Resize from any edge or tr
  </div>
</div>

CSS

.resize-drag {
  background-color: #29e;
  color: white;
  font-size: 13px;
  font-family: sans-serif;
  border-radius: 8px;
  padding: 0px;
  margin: 30px 20px;
  text-align: center;
  width: 120px;

  /* This makes things *much* easier */
  box-sizing: border-box;
}

.resize-container {
  width: 100%;
  height: 240px;
}

JavaScript

interact('.resize-drag')
  .resizable({
	  margin: 1,
    preserveAspectRatio: false,
    edges: { left: true, right: true, bottom: true, top: 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.transform = 'translate(' + x + 'px,' + y + 'px)';
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    target.textContent = Math.round(event.rect.width) + 'Ă—' + Math.round(event.rect.height);
  });