title: Dropping content into textarea
body: <p>I'm trying to drag the content of the paragraph into the <code>textarea</code>. The text disappears when I try to drop it in the <code>textarea</code>. I want it to have the same behavior as the div with id <code>div1</code></p>
  <p>code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
  }
  
  function drop(ev) {
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;br/&gt;
  
  &lt;p id="drag1" draggable='true' ondragstart="drag(event)"&gt;
    here is some text foo-bar
  &lt;/p&gt;
  
  &lt;textarea class="textarea" ondrop="drop(event)" ondragover="event.preventDefault()" placeholder="Drag and Drop image , Or paste image here" style="width: 810px; height: 200px"&gt;&lt;/textarea&gt;
  
  &lt;div id="div1" ondrop="drop(event)" ondragover="event.preventDefault()"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>