javascript - 如何在动态调整大小时在 div 上显示高度

Question

我想知道下面的 Javascript 代码是如何工作的。

我在 javascript 上试过这个，但它显示错误。我从以下位置获得此代码:http://interactjs.io/ (调整大小)。

我只想在垂直调整大小时在 div 上显示高度。代码如下:

interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener
  })
  .resizable({
    edges: {
      left: true,
      right: true,
      bottom: true,
      top: true
    }
  })
  .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 + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    target.textContent = event.rect.width + '×' + event.rect.height;
  });

.resize-drag {
  background-color: #29e;
  color: white;
  font-size: 20px;
  font-family: sans-serif;
  border-radius: 8px;
  padding: 20px;
  margin: 30px 20px;
  width: 120px;
  /* This makes things *much* easier */
  box-sizing: border-box;
}
.resize-container {
  width: 100%;
  height: 240px;
}

<div class="resize-container">
  <div class="resize-drag">
    Resize from any edge or corner
  </div>
</div>

Answer 1

把这个放在最前面:

<script src="http://code.interactjs.io/interact-1.2.5.min.js" type="text/javascript"></script>