Variable Breite Textfeld in Javascript

Question

Ich frage mich, ob dies in JS möglich ist: Ich möchte ein Textfeld mit etwas Breite machen. Aber ich möchte Kontrollen hinzufügen, damit der Benutzer einfach seine Breite und Position ändern kann. Ich hoffe, Diplom-Druck in meiner Schule zu automatisieren, und ich brauche ein Werkzeug für die schnelle und einfache Anpassung beim Ausfüllen von Formularen.

Answer 1

Auschecken interact.js und ihre Beispiele.

Denken Sie daran, dass Sie nativ <textarea> Elemente mit dieser Größe ändern können:

Kombinieren Sie es und interact.js die Funktion Ziehen und Sie sind fertig.

Hier ist ein Ausschnitt: mit // * markierte Zeilen wurden von mir hinzugefügt, ansonsten ist dieses Beispiel genau von der Website interact.js.

Ich habe diese Zeilen, so dass wir das Element nicht ziehen, wenn die Maus in den „Resizer Rechteck“ ist

// 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>