Problema con drop y drag de html5

Jnuserful · #1 (**permalink**) 18/09/2011, 09:08

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">
    <head>
        <title>Ejemplo de arrastrar y soltar</title>
        <style type="text/css">
            #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);}
            
        </style>
        <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;
            }
        </script>
    </head>
    <body>
        <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>
            <div id="arrastrable2" draggable="true" ondragstart="return start(event);" ondragend="return end(event);">
                2
            </div>
            <div id="arrastrable3" draggable="true" ondragstart="return start(event);" ondragend="return end(event);">
                3           
            </div>      
        </div>
        
        <div id="destino2" ondragenter="return enter(event);" ondragover="return over(event);" ondrop="return drop(event);">
        </div>
        
        <div id="destino3" ondragenter="return enter(event);" ondragover="return over(event);" ondrop="return drop(event);">
        </div>
    </body>
</html>

esto solo pasa en chrome y ff si me funciona

ojala me puedan ayudar.

gracias