¿El evento HTML5 / Canvas onDrop no se activa?

Estoy jugando con la carga de files, drag and drop, y el canvas, pero por alguna razón la function de inicio nunca parece ejecutarse, aquí está el violín en el que estoy trabajando: http://jsfiddle.net/JKirchartz/E4yRv/

el código relevante es:

canvas.ondrop = function(e) { e.preventDefault(); var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function(event) { var img = new Image(), imgStr = event.target.result; state.innerHTML += ' Image Uploaded: <a href="' + imgStr + '" target="_blank">view image</a><br />'; img.src = event.target.result; img.onload = function(event) { context.height = canvas.height = this.height; context.width = canvas.width = this.width; context.drawImage(this, 0, 0); state.innerHTML += ' Canvas Loaded: <a href="' + canvas.toDataURL() + '" target="_blank">view canvas</a><br />'; }; }; reader.readAsDataURL(file); return false; }; 

¿Por qué este evento no se dispara? Lo probé en Firefox y Chrome.

Para que el evento de caída se ondragover , ondragover tener una function de ondragover :

 canvas.ondragover = function(e) { e.preventDefault(); return false; }; 

Si intenta arrastrar su image de gato en el canvas, no funcionará, este error se informa en la console de Firefox:

 [04:16:42.298] uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMFileReader.readAsDataURL]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://fiddle.jshell.net/_display/ :: <TOP_LEVEL> :: line 57" data: no] 

Sin embargo, funcionará si arrastra una image desde su escritorio . Creo que para las imágenes en la página debe usar methods de acceso DOM regulares, la API de files solo es necesaria para files externos arrastrados al browser.

Por lo que puedo decir, la respuesta de robertc es cómo los browseres continúan comportándose, tienes que tener un ondragover funciones ondragover .

Pero para expandirlo ligeramente, la function debe devolver false y no ser true o undefined : las funciones no operativas regresarán undefined . No parece importar si se evita el valor pnetworkingeterminado, se activará el controller de events de inicio de session. Querrá un preventDefault en la function ondrop, de lo contrario, el file se downloadá inmediatamente a la carpeta de descarga pnetworkingeterminada de su browser:

 document.getElementById('drop-zone').ondragover = function(e) { return false; } document.getElementById('drop-zone').ondrop = function(e) { e.preventDefault(); console.log('ondrop', e); } 
 #drop-zone { border: solid; height: 3em; width: 10em; } 
 <div id="drop-zone">Drop zone</div>