title: Javascript to Drag and Drop in HTML5
body: <p>Trying to do a simple drag and drop example in HTML5 - but when I drop the image into the div element I get the following error.</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot set property 'innerHTML' of null</p>
  </blockquote>
  
  <p>So I assume the error message means dragElement is null.  I don't understand why though, because I set it in the dragstart event to be the HTML of the img element.</p>
  
  <p>Anyone know how to make this work?</p>
  
  <pre><code>var dragElement = null;
  
  $('#x').bind('dragstart', function (e) {
      dragElement = this;
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/html', this.innerHTML);
  });
  
  $('#drop-box').bind('dragover', function (e) {
      e.preventDefault();
      return false;
  });
  
  $('#drop-box').bind('drop', function (e) {
      e.preventDefault();
      if (e.stopPropagation) {
          e.stopPropagation();
      }
  
      if (dragElement != this) {
          dragElement.innerHTML = this.innerHTML;
          this.innerHTML = e.originalEvent.dataTransfer.getData('text/html');
      }
  
      return false;
  });
  </code></pre>