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:
Y este es el codigo del script.js
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:
<!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
// 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;