如何在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>