Why is ondrop not working?

Question

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.

Here is a Plunker: http://plnkr.co/edit/qGEdYO8okRZAR3bnZrNk?p=preview

This is the trivial wiring example:

<script>
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");
};
</script>

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?

My goal is to hook this up with AngularJS, but I needed to simplify in order to ask the question here.

Answer 1

This is the only magic left:

holder.ondragover = function (e) { 
  e.preventDefault() 
}

plunkr