title: Prevent drag event to interfere with input elements in Firefox using HTML5 drag/drop
body: <p>It seems that an input element loses a lot of functionality when put into an element with draggable="true". This only seems to occur in firefox.</p>
  
  <p>See my jsfiddle:
  <a href="http://jsfiddle.net/WC9Fe/3/" rel="noreferrer">http://jsfiddle.net/WC9Fe/3/</a></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id="drag" draggable="true"&gt;
      Drag this div &lt;br /&gt;
      &lt;input id="message" type="text" /&gt;
  &lt;/div&gt;
  &lt;div id="drop"&gt;
      Drop area
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#drag').on('dragstart', function(e){
      e.originalEvent.dataTransfer.setData('Text', $('#message').val());
      e.originalEvent.dataTransfer.effectAllowed = 'move';
  });
  
  var drop = $('#drop');
  drop.on('dragover', function(e){
      e.preventDefault();
  });
  drop.on('dragenter', function(e){
      e.preventDefault();
  });
  drop.on('drop', function(e){
      alert('Target succesfully dropped: ' + e.originalEvent.dataTransfer.getData('Text'));
      e.preventDefault();
  });
  </code></pre>
  
  <p>Now try to select text in the input using firefox. Seems impossible. Try the same in IE/Chrome. Seems to work just fine.</p>