如何在动态调整大小的同时显示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>