title: Issue with jQuery UI Drag & Drop - Won't allow drop in textarea after typing in it
body: <p>I'm creating an interface that allows the user to drag &amp; drop preset responses into a "reply" <code>&lt;textarea&gt;</code>. I decided to use jQuery UI.</p>
  
  <p><strong>The issue:</strong> After typing in the <code>&lt;textarea&gt;</code>, the <strong>.droppable()</strong> functionality is broken.</p>
  
  <p>I can click inside the <code>&lt;textarea&gt;</code> and then drop text into it, but after typing, I can't drop any text into the <code>&lt;textarea&gt;</code>...</p>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>$(document).ready(function(){
  
      $(init);
  
      // Initialization
      function init(){
          // Draggable
          $(".response").draggable({
              helper : "clone",
              cursor : "move"
          });
  
          // Droppable
          $(".survey-reply textarea").droppable({
              accept : ".response",
              drop : dropResponse
          });
      }
  
      // When Dropped
      function dropResponse(event,ui) {
  
          var draggable = ui.draggable;
  
          // Get existing text
          var text = $(this).text();
  
          // If field is empty then just apply the dragged response
          if (text == "") {
              $(this).text(draggable.children(".saved-response").val()).appendTo(this);
          }
          // If not, then add the dragged response to the present text
          else {
              $(this).text(text + ' ' + draggable.children(".saved-response").val()).appendTo(this);
          }
  
      }
  
  });
  </code></pre>
  
  <p>This accomplishes what I need (almost). It allows me to drag the <code>&lt;li&gt;</code> responses into a <code>&lt;textarea&gt;</code>. It also compiles the text instead of replacing the text in the <code>&lt;textarea&gt;</code>.</p>
  
  <p><strong>What it doesn't do:</strong> I need the user to be able to type in the <code>&lt;textarea&gt;</code>, then drag a response into the <code>&lt;textarea&gt;</code>, at which time the preset response is added to the typed text.</p>
  
  <p>At the moment, I can click inside the <code>&lt;textarea&gt;</code>, and while it is in focus, drag responses into  it. But for some reason, <strong><em>typing in the <code>&lt;textarea&gt;</code> disables the droppable event...</em></strong></p>
  
  <p><em><strong>If anyone can help me figure out how to type in the text areas, then drag the responses into the same text area, I would be greatful!</em></strong></p>
  
  <p><strong>Note:</strong> I didn't include the HTML, but I assure you, the selectors are accurate. I do have a <strong>placeholder</strong> attribute applied to the <code>&lt;textarea&gt;</code>. I don't believe this has anything to do with the issue (since dragging and dropping the text eliminates the displayed placeholder text... </p>