javascript - 允许将文本拖放到 html 输入字段中，而不清除以前的数据

Question

我正在开发需要输入字段的 Django 应用程序。用户可以将文本拖放到输入字段中。但它会清除以前输入的数据。我想要输入字段中所有键入和可拖动的文本。我怎样才能实现这个目标？

<script type="text/javascript" >
{
  function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
  }

  function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.value = $("#" + data).html();
  }

}

Answer 1

您无法将数据附加到输入字段，但您可以获取旧值并将其添加到其中。获取由 event.dataTransfer.getData('text'); 拖动的值，然后将其与旧值一起添加，例如

var input = document.getElementById("test");
input.addEventListener('drop', function (event) {
    event.preventDefault();
    var textData = event.dataTransfer.getData('text'); // get the dragged value
    var oldval = event.target.value; // get the old value in the input
    var newval = oldval + textData; // add it with the value which is dragged upon
    event.target.value = newval; // change the value with the new value
});
document.querySelector('[draggable="true"]').addEventListener('dragstart', function(e){
  e.dataTransfer.setData('text', e.target.innerHTML);
});

<input id="test">
<p draggable="true">Some text</p>

尝试将文本值拖到输入上
另外，没有使用jquery。