Javascript中的可变宽度文本框

Question

我想知道是否可以在JS中执行此操作： 我想使某些文本框具有某种宽度。但我想添加控件，以便用户可以简单地改变它的宽度和位置。 我希望能够在我的学校自动化文凭印刷，并且我需要在填写表格时进行快速简单调整的工具。

Answer 1

查看interact.js及其示例。

记住，你可以调整本地元素<textarea>此：

结合起来，并interact.js的拖曳功能，和你做。

这是一段代码：标有// *的行是我添加的，否则这个示例完全来自interact.js网站。

我添加的那些行，所以如果鼠标在“缩放工具矩形”

// target elements with the "draggable" class 
 
interact('.draggable') 
 
    .draggable({ 
 
    // enable inertial throwing 
 
    inertia: true, 
 
    // keep the element within the area of it's parent 
 
    restrict: { 
 
     restriction: "parent", 
 
     endOnly: true, 
 
     elementRect: { top: 0, left: 0, bottom: 1, right: 1 } 
 
    }, 
 
    // enable autoScroll 
 
    autoScroll: true, 
 

 
    // call this function on every dragmove event 
 
    onmove: dragMoveListener, 
 
    // call this function on every dragend event 
 
    onend: function (event) { 
 
     var textEl = event.target.querySelector('p'); 
 

 
     textEl && (textEl.textContent = 
 
     'moved a distance of ' 
 
     + (Math.sqrt(event.dx * event.dx + 
 
        event.dy * event.dy)|0) + 'px'); 
 
    } 
 
    }); 
 

 
    function dragMoveListener (event) { 
 
    var rel_x = event.clientX - event.target.getBoundingClientRect().left; // * 
 
    var rel_y = event.clientY - event.target.getBoundingClientRect().top; // * 
 
    var w  = event.target.offsetWidth;         // * 
 
    var h  = event.target.offsetHeight;         // * 
 
    var threshold = 20;             // * 
 
    if(rel_x > w - 20 && rel_y > h - 20) return;       // * 
 
    
 
    var target = event.target, 
 
     // keep the dragged position in the data-x/data-y attributes 
 
     x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, 
 
     y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; 
 
    // translate the element 
 
    target.style.webkitTransform = 
 
    target.style.transform = 
 
     'translate(' + x + 'px, ' + y + 'px)'; 
 

 
    // update the posiion attributes 
 
    target.setAttribute('data-x', x); 
 
    target.setAttribute('data-y', y); 
 
    } 
 

 
    // this is used later in the resizing and gesture demos 
 
    window.dragMoveListener = dragMoveListener;

#drag-1, #drag-2 { 
 
    width: 25%; 
 
    height: 100%; 
 
    min-height: 6.5em; 
 
    margin: 10%; 
 
    font-family: monospace; 
 
    color: black; 
 

 
    -webkit-transform: translate(0px, 0px); 
 
      transform: translate(0px, 0px); 
 
} 
 

 
#drag-me::before { 
 
    content: "#" attr(id); 
 
    font-weight: bold; 
 
}

<script src="http://code.interactjs.io/v1.2.6/interact.min.js"></script> 
 
<textarea id="drag-1" class="draggable"> 
 
    <p> You can drag one element </p> 
 
</textarea> 
 
<textarea id="drag-2" class="draggable"> 
 
    <p> with each pointer </p> 
 
</textarea>