Возможно ли перетаскивание файлов в стандартное html текстовое поле? - PullRequest
Новая
       51

Возможно ли перетаскивание файлов в стандартное html текстовое поле?

0 голосов
/ 29 мая 2020

Я хотел бы знать, можно ли добавить файлы перетаскивания в стандартный HTML тег <textarea> и одновременно с этим иметь запись? Аналогичное текстовое поле stackoverflow

1 Ответ

1 голос
/ 29 мая 2020

Если вы используете HTML5, вы можете перетаскивать текстовое содержимое следующим образом:

CSS: 

#tadrop{
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

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 = document.getElementById(data).innerHTML;
  //jQuery: ev.target.value = $('#'+data).text();
}

HTML: 

<p>Drag SOME TEXT into the rectangle:</p>

<textarea id="tadrop" ondrop="drop(event)" ondragover="allowDrop(event)"></textarea>

<p id="drag1" draggable="true" ondragstart="drag(event)">SOME TEXT</p>

Вот скрипка: перетащите текст на textarea.

...