Buenas de nuevo, estoy probando los manejadores de eventos semánticos y hay algo que me va a volver loco.

En el siguiente script, si la llamada al script está en el <body> me funciona pero si está en el <head> no funciona. ¿Esto es así siempre?, en los manuales que he leido no pone nada al respecto y de hecho todos recomiendan poner la llamada al script en el head...

¿Hay alguna limitación para el uso de estos manejadores?

El codigo html es:

Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
    	<meta charset="utf-8" />
    	<title>Prueba</title>
    	<link rel="StyleSheet" media="screen" type="text/css" href="estilos.css"> 
</head>
<body>
	<div id="esto" draggable="true">Este elemento se puede arrastrar</div>
  	<div id="esto2" draggable="true">Este también</div>
  	<br />
  	<div id="aqui" ondragover="alarrastraraqui(this)" ondrop="alsoltar(this)">Arrastrar aqui</div>  	
<script type="text/javascript" src="javascripts/scripts.js"></script>	
</body>
Y este es el codigo del script.js

Código:
// Evento al empezar a arrastrar un div
    function alarrastraresto (e ) {
      // Definimos el contenido del div cómo valor arrastrado de tipo Text
      e.dataTransfer.setData('Text', this.innerHTML );
      // Permitimos soltar en zonas de copia
      e.dataTransfer.effectAllowed = 'copy';
    }
    // Evento al arrastrar por encima de "Arrastrar aqui"
    function alarrastraraqui (e ) {
      // Permitimos copiar 
      e.dataTransfer.dropEffect = 'copy';
      // Permitimos soltar 
      return false;
    }
    // Evento al soltar
    function alsoltar (e ) {
      // Alertamos el valor de tipo Text definido en alarrastraresto
      alert ( e.dataTransfer.getData('Text') );
    }
    // Enlazamos los eventos
    document.getElementById('aqui').ondragover = alarrastraraqui;
    document.getElementById('esto').ondragstart = alarrastraresto;
    document.getElementById('esto2').ondragstart = alarrastraresto;
    document.getElementById('aqui').ondrop = alsoltar;