Javascriptの可変幅のテキストボックス

Question

これはJSで可能なのですか？ いくつかの幅のテキストボックスを作成したいと思います。しかし、私はコントロールを追加して、ユーザーが単に幅と位置を変更できるようにしたい。 私は学校で卒業式の印刷を自動化したいと思っています。フォームフィリング中に素早く簡単に調整できるツールが必要です。

Answer 1

interact.jsとその例を参照してください。それを組み合わせるとinteract.jsさんは、機能をドラッグすると、設定が完了している

：

あなたはネイティブこれで<textarea>要素のサイズを変更できることを覚えておいてください。

ここにスニペットがあります：// *と記されている行は私によって追加されました。そうでない場合は、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>