Question

我想知道这可以在JS中做到：我想制作一些宽度有些的文本框。但我想添加控件，以便用户只需更改其宽度和位置即可。我希望在我的学校自动化文凭印刷，我需要在填写表格时快速简单地调整工具。

Answer 1

查看interact.js及其示例。

请记住，您可以使用以下内容原生调整<textarea>元素的大小：

将它与interact.js的拖动功能结合起来就完成了。

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

我添加了这些行，因此如果鼠标位于＆＃34;缩放器矩形内，我们不会拖动元素＆＃34;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Javascript中的可变宽度文本框

1 个答案: