title: Why is ondrop not working?
body: <p>I am trying to get drag and drop working, but I am wiring a function to the 'ondrop' event, but the function is never called.</p>
  
  <p>Here is a Plunker:  <a href="http://plnkr.co/edit/qGEdYO8okRZAR3bnZrNk?p=preview" rel="noreferrer">http://plnkr.co/edit/qGEdYO8okRZAR3bnZrNk?p=preview</a></p>
  
  <p>This is the trivial wiring example:</p>
  
  <pre><code>&lt;script&gt;
  var holder = document.getElementById('holder');
  
  holder.ondragenter = function (e) { 
      this.className = 'nicenice lvl-over'; 
      return false; 
  };
  holder.ondragleave = function () { 
      this.className = 'nicenice'; 
      return false; 
  };
  holder.ondrop = function (e) {
      e.preventDefault();
      console.log("GOT DROP EVENT");
      alert("dropped here");
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I put the alert in there just to see if I can get some indication of getting the drop event.  I added the ondragenter and ondragleave mainly just to see if I was getting ANY event.  Those events I seem to get.  What have I omitted that is necessary to receive a drop event?  what other MAGIC is needed?</p>
  
  <p>My goal is to hook this up with AngularJS, but I needed to simplify in order to ask the question here.</p>