Tengo un problema con este codigo de html5... el problema esta donde puse un comentario en el codigo.
Código HTML:
Ver original<!DOCTYPE html>
<html xml:lang="es_MX" lang="es_MX"> #destino1,#destino2,#destino3 {
float: left;
width: 250px;
height: 250px;
padding: 10px;
margin: 10px;
}
#arrastrable1,#arrastrable2,#arrastrable3 {
width: 75px;
height: 70px;
padding: 5px;
margin: 5px;
}
#destino1 { background-color: #F00;}
#destino2 { background-color: #0F0;}
#destino3 {background-color: #00F;}
#arrastrable1 {background-color: rgba(255,0,0,.5);}
#arrastrable2 {background-color: rgba(0,255,0,.5);}
#arrastrable3 {background-color: rgba(0,0,255,.5);}
<script type="text/javascript"> function start(e)
{
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("Data",e.target.getAttribute("id"));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
}
function enter(e)
{
return true;
}
function over(e)
{
var esA = e.dataTransfer.getData("Data"); //aqui esta el error, getData no me funciona
var id = e.target.getAttribute("id");
if(id == "destino1") return false;
if((id == "destino2") && esA == "arrastrable3") return false;
else
if (id == "destino3" && (esA == "arrastrable1" || esA == "arrastrable2"))
{
return false;
}else return true;
}
function drop(e)
{
var esA = e.dataTransfer.getData("Data");
e.target.appendChild(document.getElementById(esA));
e.stopPropagation();
return false;
}
function end(e)
{
e.dataTransfer.clearData("Data");
return true;
}
<h1>Ejemplo de arrastrar y soltar en HTML5
</h1> <div id="destino1" ondragenter="return enter(event);" ondragover="return over(event);" ondrop="return drop(event);"> <div id="arrastrable1" draggable="true" ondragstart="return start(event);" ondragend="return end(event);"> 1
<div id="arrastrable2" draggable="true" ondragstart="return start(event);" ondragend="return end(event);"> 2
<div id="arrastrable3" draggable="true" ondragstart="return start(event);" ondragend="return end(event);"> 3
<div id="destino2" ondragenter="return enter(event);" ondragover="return over(event);" ondrop="return drop(event);">
<div id="destino3" ondragenter="return enter(event);" ondragover="return over(event);" ondrop="return drop(event);">
esto solo pasa en chrome y ff si me funciona
ojala me puedan ayudar.
gracias